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