By installing jQuery using the npm command
You can install the jQuery in your current project folder using the below commands
npm install --save jquery
Now add the below HTML code to your app.component.html file.
HTML
<!DOCTYPE html> <html> <head> <title>Jquery in Angular</title> </head> <body> <h1 style="color:green">w3wiki</h1> <h2>Jquery in Angular</h2> <button>click me </button> <p id="result"></p></body> </html> |
After adding the HTML code add the below Angular code to app.component.ts file to use jQuery in Angular.
Javascript
import { Component, OnInit } from '@angular/core';import $ from 'jquery';@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ]})export class AppComponent implements OnInit { ngOnInit() { $('button').click(function () { $('#result').html('<b>jQuery used in angular by installation.</b>'); }); }} |
Output:
How to use jQuery in Angular ?
In this tutorial, we will learn how we can use jQuery with Angular. There are two ways in which we can use jQuery with Angular as discussed below:
Table of Content
- By installing jQuery using the npm command
- Using jQuery CDN to use it