How do you use jquery in Angular?
You can use jquery in Angular using 3 simple steps,
-
Install the dependency: At first, install the jquery dependency using npm
npm install --save jquery -
Add the jquery script: In Angular-CLI project, add the relative path to jquery in the angular.json file.
"scripts": ["node_modules/jquery/dist/jquery.min.js"] -
Start using jquery: Define the element in template. Whereas declare the jquery variable and apply CSS classes on the element.
<div id="elementId"><h1>JQuery integration</h1></div>import { Component, OnInit } from '@angular/core';declare var $: any; // (or) import * as $ from 'jquery';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})export class AppComponent implements OnInit {ngOnInit(): void {$(document).ready(() => {$('#elementId').css({ 'text-color': 'blue', 'font-size': '150%' });});}}
July 20, 2022
1169
Read more
What is Angular Framework?
November 04, 2022
AngularWhat is a Angular module?
November 03, 2022
AngularWhat are the steps to use animation module?
October 31, 2022
Angular