Angular2 with jQuery

Reference jQuery

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

Create jQuery component

import { Component, OnInit, ElementRef } from 'angular2/core';
declare var $: any;

@Component({
    selector: 'jquery-app',
    template: `
    <button>Say hello</button>
    `
})
export class jQueryComponent implements OnInit {
    constructor(private _elmRef: ElementRef) { }

    ngOnInit() { 
        $(this._elmRef.nativeElement)
            .find('button')
            .on('click', function(){
               alert('Hello Hemant'); 
            });
    }
}

Use in Component

import {jQueryComponent} from './jquery-component/jquery.component';

@Component({
    template: '<jquery-app></jquery-app>',
    directives: [jQueryComponent]
})

Last updated

Was this helpful?