How to use Angular component value in jquery Angular 2

Dharmraj
Posted by Dharmraj under Angular 2 category on | Points: 40 | Views : 273
When you want to use Angular component value inside jquery or javascript block then you can store angular component reference in another variable before start jquery block.

After that inside jquery block you will have angular angular reference into temporary variable and this will reference to jquery document or whatever javascript elemnt object.

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: '<div>Hello</div>',
styles: ['.body{}'],
})

export class AppComponent implements OnInit {
title = 'Tour of Heroes';

getData: void {
let tmpThis = this; //temporary reference of currect component object

//jquery script begin
$(document).ready(function () {
console.log("Jquery variable : "+this.title);
console.log("Angular variable : "+tmpThis.title);
});
//jquery script end
}
}

Comments or Responses

Posted by: Pandyamanav on: 11/24/2017 Level:Starter | Status: [Member] | Points: 10
Nice share bro , its somehow useful kind of stuff

Thanks for sharing
Posted by: Dharmraj on: 11/24/2017 Level:Starter | Status: [Member] | Points: 10
Thanks brother @Manav Pandya

Login to post response