How to install Jquery in Angular?

Asked

Viewed 5,520 times

3

What is the correct way to install jquery in an angular project 2+?

Bootstrap:

npm install --save jquery@latest

Only it is not available in node_modules for me to take the path and put in angular.json

jquery angular

  • Click inside my demo, I added a window.click there appears a alert

  • I forgot to delete this question... I had installed yes, only the vscode that took to update. I just closed everything and gave ng serves that was ok...

  • Very useful question, worth leaving!

  • 1

    Just to let you know that angular-cli.json is now called only angular.json

3 answers

3


jQuery at Angular CLI

Install the package through:

  • npm install jquery — save

later on your . /angular-cli.json.

  • “scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ],

you can also do the same with bootstrap as an example :

  • "scripts": [".. /node_modules/bootstrap/dist/js/bootstrap.js"]

finally include in its component:

  • import * as $ from ‘jquery’;

Obs:. $ will serve you as a global reference for Jquery

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");  
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '5em'}, "slow");
    });
});
  }

2

Try it that way:

npm install jquery --save

2

Root of the project:

npm install jquery --save

angular-cli.json

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

Ts:

   import $ from "jquery";

stackblitz

Browser other questions tagged jquery angular

You are not signed in. Login or sign up in order to post.