Easiest and shortest way to use jQuery in Angular 2/4
How do I use jQuery with Angular?
How to import jQuery into Angular2 widget projects?
I don't know if it is safe, but it will definitely help. quite
source to share
1st step
From index.html
my test project \ src \ index.html
Enter jQuery cdn below the tag app-root
.
...
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
...
Step 2
my test project \ src \ app \ test \ test.component.ts
Navigate to the components you want .ts script.
import { Component, OnInit } from '@angular/core';
// this line will allow you to use jQuery
declare var $: any;
@Component({
...
})
Third step
my test project \ src \ app \ test \ test.component.ts
Validate jQuery by logging 'I<3Cats'
inside jQuery syntax $(() => { /* content here */ })
.
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
$(() => {
console.log('hello there!');
});
}
}
You can also use this technique with other javscript libraries. I don't know if it is safe, but it will definitely help. quite
source to share
We have two use cases for jQuery in angular2 / 4.
Step 1:
Load the jQuery library into your project folder and point the path to angular / cli json using the script module.
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Step 2 : either we can use the online CDN or the local jQuery library path inindex.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
//here you can give link to it
</head>
source to share