Angular Scripts Libraries, Custom Code

@types/jquery

This package contains type definitions for jquery. When jQuery is globally available, you can use jQuery and $ directly.

npm install --save @types/jquery

Installed into My-Project node-modules

D:\AngularProjects\Version2\MyFirstApp>npm install --save @types/jquery
    my-first-app@0.0.0 D:\AngularProjects\Version2\MyFirstApp
    `-- @types/jquery@3.3.4

D:\AngularProjects\Version2\MyFirstApp>npm install -g @types/jquery
    C:\Users\yashwanth.m\AppData\Roaming\npm
    `-- @types/jquery@3.3.4

---

How to include and use jQuery in Angular CLI project

First install jQuery using npm as follows npm install jquery --save

D:\AngularProjects\Version2\MyFirstApp>npm install jquery --save
    my-first-app@0.0.0 D:\AngularProjects\Version2\MyFirstApp
    `-- jquery@3.3.1

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” ]

Note: If you want to use bootstrap in your application or if you already have in your project, make sure to include jQuery before including the bootstrap javascript file as follows. Since bootstrap’s javascript file requires jQuery.

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

After including jQuery stop running your Angular CLI application and then re run it using ng serve.

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’;

Take a look at the below code that uses jQuery to animate div on click, especially in second line below, we are importing everything as $ from jQuery.

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");
        });
    });
  }
}