How to use jQuery Plugin with Angular 4?
Install jquery with npm
npm install jquery --save
Add typings
npm install --save-dev @types/jquery
Add scripts to angular-cli.json
"apps": [{
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
],
...
}]
Build project and serve
ng build
Hope this helps! Enjoy coding
Yes you can use jquery with Angular 4
Steps:
1) In index.html
put below line in tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2) In component ts file below you have to declare var like this
import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular 4 with jquery';
toggleTitle(){
$('.title').slideToggle(); //
}
}
And use this code for corresponding html file like this:
<h1 class="title" style="display:none">
{{title}}
</h1>
<button (click)="toggleTitle()"> clickhere</button>
This will work for you. Thanks