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

Angular2 Tutorial: Creating Attribute Directives According to Angular2 documentation, directives are classes that can change the component behavior or/and appearance, which basically means they can add CSS classes and styles, register events and manipulate the component's properties. In this tutorial I'm going to show you how to create a very ...
Creating an Angular2 Image Gallery In order to make this tutorial easier for beginners I'm going to start by creating the simplest possible gallery, from there I'm going to develop and add more functionalities to it, which will increasingly make the gallery more complex as we proceed. If you are already familiar and have some experie...
Interacting with Child Components in Angular2 There are lots of situations where we have to divide a component into several sub-components, resulting in a parent with N child components that somehow have to interact with the parent, like for example a menu component like this: In this case the menu-componen...
Angular2 error: Error in ./AppComponent class AppComponent_Host – inline template:0:0 caused b... If you're seeing this error when you run your application it's probably because you're trying to use http.get without importing the HttpModule. This is what the error looks like on the browser console: core.umd.js:5995 EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline temp...

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>