Angular 2 and JQuery

Angular2 + jQuery

How to use jQuery in Angular 2

Preparation

Import jQuery

npm install jquery --save

TypeScript definition

If you use TypeScript, you need to import TypeScript Definition for Jquery

To import tsd, tsd command is easier.

npm install -g tsd

Import jQuery tsd

tsd install jquery --save 

tsd.json was generated.

Use jQuery in Component

This is an example of jQuery with Component

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

declare var $:JQueryStatic;

@Component({
    selector: 'app',
    template: `<div id="ext">Click Me!</div>`
})

export class JqueryComponent {
    ngAfterViewInit() {
        $("#ext").on('click', function()
        {
            alert('jQuery');
        });
    }
}