Daniel Kreider

How to use jQuery with Angular

05. Sep. 2020

How to use jQuery with Angular

The complete guide on adding jQuery to your Angular project - with code examples and explanations

How do you add the jQuery library to your Angular project?

And do it in 5 quick minutes?

In this guide I'll show you two different ways that you can use to install jQuery and use it in your Angular project.

1. The quick-n-dirty approach.

  • Open the index.html file and add a script tag before the closing body tag like so.
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Angular Application</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" href="./assets/css/style.css">
    </head>
    <body>
        <app-root></app-root>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </body>
</html>
  • In your component's Typescript file declare a variable called jQuery like so.

declare var jQuery: any;

See full example below.

import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";

declare var jQuery: any;

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {

    constructor() {}

    ngOnInit() {
        jQuery("#myselector").style="display: none;";
    }
}
  • Once your jQuery variable is declared you can use it anywhere in your components logic to manipulate the DOM, etc...

So what did we just do?

We added the jQuery script to our index.html file to make sure that it loads with the rest of our app. This gives us access to a variable called jQuery but to use it we had to declare it at the top of our component's logic file as a type of any that way Typescript wouldn't throw compile errors.

2. The clean and elegant approach.

  • Run npm install --save-dev @types/jquery
  • Run npm install --save jquery
  • In your component file import jQuery like so - import * as $ from 'jquery';. See full example below.
import { Component, OnInit } from "@angular/core";
import { Title } from "@angular/platform-browser";
import * as $ from 'jquery';

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
    constructor() {}
    ngOnInit() {
        jQuery("#myselector").style="display: none;";
    }
}

3. Conclusion

So there it is - two different ways that you can add jQuery to your Angular project in less then 5 minutes.