Using jQuery with Angular2

I know the idea of using jQuery with Angular2 may seen a little bit weird for lots of you, as we all know, Angular2 is responsible for managing everything related to our view components and DOM elements, it doesn’t sound like a good idea to use another framework to do a job Angular can easily do.

That being said, why would someone want to integrate jQuery with Angular2?

Well, there are some cases we still have to use jQuery, like for example, reusing some jQuery code or components when it’s not feasible to rewrite everything in Angular2, that’s probably the reason why you’re reading this tutorial.

Now let’s see how we can do this, it’s actually really simple, basically all you have to do is to add the jQuery script to your index.html and declare jQuery on your component, here is an example:

import {Component} from 'angular2/core';
 
declare var jQuery:any;
 
@Component({
    selector: 'my-app',
    template: `<button onclick="console.log('It Worked!!')">
                    jQuery Integration Test
               </button>
              `
})
 
export class AppComponent { 
 
    ngAfterViewInit() {
        jQuery('button').click();
    }
}

When you run your application you’ll see the text ‘It Worked!!’ on your console. That’s it!! This was a very short tutorial, but I hope it was helpful for you, just leave a comment if you have any doubts.

Recommended for you

Tutorial: Angular 2 Datatable with Sorting, Filtering and Resizable Columns In this tutorial I'm going to show you one of the datatable solutions available for Angular 2, it's called ag-Grid and it's available not only for angular2, but also for other frameworks like Angular 1 and React. It's a really complete datatable, it has lots of features that I definitely want to exp...
Angular2: How to Pass Callback Functions to a Component There are lots of situations where it's useful to pass a function to an angular2 component, for instance, when our component is a dialog and we have to perform an specific task when it closes, or pass the action of one of its buttons, or even events like keypress, resize, mouseover, etc. If you're r...
Angular2 Tutorial: Detecting Clicks Outside the Component Angular2 click detection Sometimes there is a need to detect whether the user is clicking inside or outside our angular2 component, specially if your component has a dropdown element, in this case you need to know exactly where the click occurred in order to perform the right action. In this tut...
How to Load a JSON file in Angular2 Angular2 makes it very easy for us to load data from JSON files, we can do it by simply making a http request. Now let's see how we can do that. To be able to make Http requests we first have to import the HttpModule on the app.module.ts, once you've done that your code should look like this: ...

One comment on “Using jQuery with Angular2

  1. abbas ali

    hii jines
    i read your coding contents blog.
    it’s really amazing. it help me alot.
    recently i switched from angularjs to angular2. it’s annoying me a lot.
    could you send me routing, uigrid coding in angular2

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>