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

July 20, 2022
1169