Could I use jQuery with Angular?

Technology CommunityCategory: AngularCould I use jQuery with Angular?
VietMX Staff asked 3 years ago

First install jQuery using npm as follows

npm install jquery — save

Second go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows

“scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]

Now to use jQuery anywhere in your application, all you have to do is to import it as follows in app.component.ts file.

import * as $ from ‘jquery’;

Consider:

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}