In this tutorial you will learn How to use jQuery with Angular.
Table of contents
Install the dependency
NPM is used in this tutorial, so install the jquery dependency like the following :
|
1 |
npm install --save jquery |
Add the jquery script
You can either add the script directly in the index.html file (not recommended) or if you are working with Angular-cli, add the relative path to jquery in the angular.json file.
- angular.json
|
1 2 3 |
"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] |
Use jquery
You can then use jquery lile below :
- app.component.html
|
1 2 3 |
<div id="elementId"> <h1>Roufid tutorials</h1> </div> |
- app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import {Component, OnInit} from '@angular/core'; declare var $: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { ngOnInit(): void { $(document).ready(() => { $('#elementId').css({'background-color': 'yellow', 'font-size': '200%'}); }); } } |
The tutorial source code is available on Github. Download the source
References