Question

How do you use jquery in Angular?

Answer 1

You can use jquery in Angular using 3 simple steps,

1. Install the dependency: At first, install the jquery dependency using npm

      npm install --save jquery
2. 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"
   ]
3. 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%'});
       });
     }
   }