How to use jQuery with Angular / Typescript

Please follow these simple steps. It worked for me.

Step 1: Install jquery

npm install jquery — save
//or
npm install @types/jquery

Step 2: In the HTML file.

<p class=”test”>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, voluptatem quae asperiores cupiditate velit ratione qui nulla in consectetur assumenda corporis praesentium molestias itaque repudiandae facilis nihil et sint porro.</p>

Step 3: In the typescript file. Use the below code:

import { Component, OnInit, ViewEncapsulation } from ‘@angular/core’;
import * as $ from “jquery”;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’],
encapsulation: ViewEncapsulation.Emulated
})
export class AppComponent implements OnInit {
title = ‘demo’;
constructor() { }
ngOnInit(): void {
$(document).ready(function(){
console.log($(‘.test’).html());
});
}
}