Using jQuery plugins in Angular2

Question

I am using an admin template theme which offers notifications. You can show them this way:

$.Notification.notify('success','top left','XXX', 'YYYY');

Now I want to trigger this notification from my angular2 components.

How to do this?

// EDIT:

I have installed jQuery typings via tsd install jQuery and include it this way:

///<reference path="../../typings/jquery/jquery.d.ts" />

But now I get this error:

Answer 1

I guess you don't want to implement the whole shebang of that Notification plugin, so an easy fix would be adding that property to the type definition file.

So open up typings/jquery/jquery.d.ts and search for interface JQueryStatic {.

Just below the interface declaration add the property like this, so TypeScript doesn't complain anymore:

interface JQueryStatic {

    // Notification plugin
    Notification: any;

In the current version of the jquery.d.ts type definition file that would be line 624.

Answer 2

You have a very easy way to fix that. JQuery is a JavaScript library, if you want to use any javascript library into a typescript file, you just have to declare a variable under the import statements of your typescript file like the following :

import {SomeThing} from '...';

declare var jQuery:any;
declare var $:any;

Then you can just calling JQuery and the different plugins the following way :

$.Notification.notify('success','top left','XXX', 'YYYY');

or

jQuery.Notification.notify('success','top left','XXX', 'YYYY');

Enjoy!