How to use jQuery in Angular ?
Before starting with using jQuery in angular, we need to install it on our system. Now basically there are two general methods to install jQuery:
Note: Before starting with this tutorial, you show know the software used here is Microsoft visual studio code with NodeJs and typescript already installed to work with angular.
- Using NPM method:
Now to install jQuery Using NPM method, we need to create a new angular application by running the command at the VS Code Terminal.ng new angular1
Here angular1 is the name of the application it will take a few seconds, but it will create the angular application with all the required files.
now we “cd” into the application folder to install the jquery. We execute the following command at the VS Code terminal:cd angular1 npm install jquery --save
After this, your angular app is ready to be used with jquery. - Using jQuery CDN:
While browsing https://jquery.com/download/, you can easily locate the jQuery CDN and download it.
It is always recommended sticking with the latest version of the official CDN since it supports Subresource Integrity (SRI). Now to use the jQuery CDN, you need to reference the file in the script tag directly from the jQuery CDN domain. The code with Subresource Integrity attribute will be like this. jQuery 3.4.1 is used here.<scriptintegrity=”sha256–2z0P7MLoyxByUtvAk/xjkmindefS4auh4Pfzbm7y6g0=”crossorigin=”anonymous”></script>The above code will be included in the head tag of the HTML file(app.component.html) of the angular app.
After installing jQuery we need to make it global. In the jQuery module, jquery.min.js under ‘dis’ folder is not public. To make jQuery global, we need to do the following:
The step involves browsing to the file “angular-cli.json” which is located at the root of your Angular CLI project folder and find the script: []property, and include the path to jQuery folder as given"scripts" :["./node_modules/jquery/dist/jquery.min.js"]
Now To confirm this path, browse to node_modules -> jquery -> dist -> jquery.min.js.
You will see the path, which means you have added jQuery library globally into this application. In order for these changes to make a smooth transition in the application, we have to rerun this application using serve.ng serve -open
Now to use jQuery all that is left is to import it in whatever component you want to use jquery.
import * from jquery
Note: All the example programs are executed using microsoft visual studio code.
- Example: Now to follow up with this tutorial we need to include the Html Code in app.component.html
<!DOCTYPE html><html><head><title>Jquery in Angular</title></head><body><h1style="color:green">GeeksforGeeks</h1><h2>Jquery in Angular</h2><button>click me </button></body></html> - We need to include the below code in app.component.ts to make the button perform an action.
import * as $ from 'jquery'import {Component, OnInit}from‘ @angular / core’;export class AppComponent implements OnInit {ngOnInit() {$(‘button’).click(function() {alert(‘GeeksForGeeks’);});}}
To run this application:
After including the above code in HTML and component section of your app, we will run this app by entering the command in the terminal:
ng serve
after entering the above command go to your web browser and hit the address https://localhost:4200/ to load your application.
Output:
In the above code, we first import jquery to use its component. We then need to implement ngOnInit Lifecycle Hook which can be imported from Angular Core. We can write jQuery code inside the method ngOnInit, To add the action to the button we created in app.component.html, we add a button.click event inside ngOnInit method.
Now to run the above program
Example: In this example, we use jquery in angular to animate a filed in Html. We write the Html code in app.controller.html and write the angular code/jquery in app.controller.ts.
HTML Code:
<!DOCTYPE html><html> <head> <title>Jquery in Angular</title></head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h2>Jquery in Angular</h2> <button>Start Animation </button> <div style="border:1px solid; border-radius:3px; color:white; background:green; height:105px; width:260px; position:relative;"> jQuery in Angular </div></body> </html> |
Angular Code:
import { Component, OnInit} from ‘@angular/core’;import * as $ from 'jquery' export class AppComponent implements OnInit {ngOnInit(){$(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'}, "slow"); div.animate({fontSize:'5em'}, "slow"); }); });} |
Output:
Before Clicking the button
After Clicking the button
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Please Login to comment...