How to use Angular component value in jquery Angular 2

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
    }
}