How do you use jquery in Angular?

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%' });
       });
     }
   }