Image for post
Image for post
Photo by Caleb Angel on Unsplash

How to use jQuery with Angular

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

1. The quick-n-dirty approach.

<!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>
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;";
}
}

2. The clean and elegant approach.

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;";
}
}

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store