Ggtcf

I have Typescript code and I want to add jQuery code inside my Typescript code for MEAN Stack

$('.chips').chips();
$('.chips-initial').chips(
 data: [
 tag: 'Apple',
 , 
 tag: 'Microsoft',
 , 
 tag: 'Google',
 ],
);

$('.chips-placeholder').chips(
 placeholder: 'Enter a tag',
 secondaryPlaceholder: '+Tag',
);

TypeScript Code :

import Router from '@angular/router';
import FlashMessagesService from 'angular2-flash-messages';

Component(
 selector: 'navbar',
 templateUrl: './navbar.component.html',
 styleUrls: ['./navbar.component.css']
)

export class NavbarComponent implements OnInit 
 constructor() 
 ngOnInit() 
 
 onLogoutClick() 
 localStorage.removeItem('user');
 this.fmService.show('Successfully logged-out', 
 cssClass: 'alert-success',
 timeout: 3000
 );
 this.router.navigate(['/']);
 

I want to add previous details in my Typescript code. Help me to do this using jQuery code.

Use: import * as $ from 'jquery';

Step: 1

Include jquery file in angular.json file:

 .
 .
 "scripts": [
 "src/assets/js/core/jquery.min.js"
 ],
 .
 .

Step: 2

Declere $ vairable in ts file before @component devorated

 declare var $: any;

 @Component({
 .
 .

OR

import * as $ from "jquery";

First of all you have to install JQuery

 npm install @types/jquery --save-dev // install jquery type as dev dependency so TS can compile properly
 npm install jquery --save // save jquery as a dependency

And then use

 import * as $ from "jquery";
 //... jquery code ...

OR

npm install --save @types/jquery
//and in your typescript file 
declare var $: any;

Now you can use $ .