Easiest and Shortest way possible to use jQuery in Angular 2/4

Question

How to use jQuery with Angular?

How to import jQuery to Angular2 Typescrypt projects?

I don't know if this is safe but will sure help you. quite

read this: https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to — FAISAL, Sep 07 '17 at 10:40
there are already so many answers for the same, what you exactly want to know ? is somewhere you stuck ? post your code then — Pardeep Jain, Sep 08 '17 at 05:28

flyingpluto7 · Answer 1 · 2017-09-07T10:27:54.053

1st Step

From index.html

my-test-project\src\index.html

Type jQuery cdn below app-root tag.

...
<body>
  <app-root></app-root>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
...

2nd Step

my-test-project\src\app\test\test.component.ts

Go to your desired components .ts script.

import { Component, OnInit } from '@angular/core';

// this line will allow you to use jQuery
declare var $: any;

@Component({
  ...
})

3rd Step

my-test-project\src\app\test\test.component.ts

Test 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 this is safe but will sure help you. quite

score 0 · Answer 2 · edited Sep 12 '17 at 20:44

We have two option, for using jQuery in angular2/4.

Step 1:

Download jQuery library into your project folder and specify the path in angular/cli json withing the script module.

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

Step 2: or we can use the online CDN or the local path of the jQuery library in index.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>

Easiest and Shortest way possible to use jQuery in Angular 2/4

2 Answers2

Linked