web-dev-qa-db-fra.com

Comment utiliser jQuery avec Angular?

Quelqu'un peut-il me dire comment utiliser jQuery with Angular ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

Je suis conscient qu'il existe des solutions de contournement telles que la manipulation de class ou id de l'élément DOM au début, mais j'espère une méthode plus propre.

jqueryangular
287
Waog

Utiliser jQuery from Angular2 est un jeu d'enfant par rapport à ng1. Si vous utilisez TypeScript, vous pouvez d’abord faire référence à la définition TypeScript jQuery.

tsd install jquery --save
or
typings install dt~jquery --global --save

Les typescriptDefinitions ne sont pas obligatoires car vous pouvez simplement utiliser any comme type pour $ ou jQuery

Dans votre composant angulaire, vous devez référencer un élément DOM du modèle à l'aide de @ViewChild(). Une fois la vue initialisée, vous pouvez utiliser la propriété nativeElement de cet objet et passer à jQuery.

Déclarer $ (ou jQuery) en tant que JQueryStatic vous donnera une référence dactylographiée à jQuery. 

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

Cet exemple est disponible sur plunker: http://plnkr.co/edit/Nq9LnK?p=preview

tslint se plaindra que chosen ne soit pas une propriété sur $. Pour résoudre ce problème, vous pouvez ajouter une définition à l'interface JQuery dans votre fichier * .d.ts personnalisé.

interface JQuery {
    chosen(options?:any):JQuery;
}
298
werenskjold

Pourquoi tout le monde en fait-il un génie??. Pour ceux qui ont besoin de faire des tâches de base sur des éléments statiques, par exemple, la balise body, procédez comme suit:

  1. Dans index.html, ajoutez la balise script avec le chemin d'accès à votre bibliothèque jquery, peu importe où (de cette façon, vous pouvez également utiliser des balises conditionnelles IE pour charger la version la plus basse de jquery pour IE9 et les versions antérieures).
  2. Dans votre bloc export component, vous avez une fonction qui appelle votre code: $("body").addClass("done"); Cela entraîne normalement une erreur de déclaration. Ainsi, juste après toutes les importations dans ce fichier .ts, ajoutez declare var $:any; et vous êtes prêt à partir!
117
Starwave

C'est ce qui a fonctionné pour moi.

ÉTAPE 1 - Premières choses d'abord

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

ÉTAPE 2 - IMPORTATION

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#UPDATE - Feb - 2017

Dernièrement, j'écris du code avec ES6 au lieu de TypeScript et suis capable de import sans * as $ dans le import statement. Voici à quoi cela ressemble maintenant:

import $ from 'jquery';
//
$('#elemId').width();

Bonne chance.

87
Akash

Maintenant, c'est devenu très facile. Vous pouvez le faire en déclarant simplement la variable jQuery avec n'importe quel type dans le contrôleur Angular2.

declare var jQuery:any;

Ajoutez ceci juste après les instructions d'importation et avant le décorateur de composants.

Pour accéder à tout élément d’identité X ou de classe X, il suffit de

jQuery("#X or .X").someFunc();
52
Devesh Jadon

Un moyen simple:

1. script d'inclusion

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. déclarer

mon.component.ts

declare var $: any;

3. utiliser 

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}
24
Yosam Lee

S'il vous plaît suivez ces étapes simples. Cela a fonctionné pour moi. Commençons par une nouvelle application angulaire 2 pour éviter toute confusion. J'utilise cli angulaire. Donc, installez-le si vous ne l'avez pas déjà . https://cli.angular.io/

Étape 1: Créer une application de démonstration angulaire 2

ng new jquery-demo

vous pouvez utiliser n'importe quel nom. Maintenant, vérifiez si cela fonctionne en exécutant en dessous de cmd. (Maintenant, assurez-vous que vous pointez sur 'jquery-demo' sinon utilisez la commande cd)

ng serve

vous verrez "l'application fonctionne!" sur le navigateur.

Étape 2: Installez Bower (un gestionnaire de paquets pour le Web)

Exécutez cette commande sur cli (assurez-vous que vous pointez sur 'jquery-demo' si vous n'utilisez pas la commande cd):

npm i -g bower --save

Maintenant, après l'installation réussie de bower, créez un fichier 'bower.json' en utilisant la commande ci-dessous:

bower init

Il vous demandera des entrées, appuyez simplement sur Entrée pour tout si vous voulez des valeurs par défaut et à la fin tapez "Oui" quand il vous demandera "Ça a l'air bon?"

Vous pouvez maintenant voir un nouveau fichier (bower.json) dans le dossier "jquery-demo". Vous pouvez trouver plus d'informations sur https://bower.io/

Étape 3: Installez jquery

Exécuter cette commande

bower install jquery --save

Il créera un nouveau dossier (bower_components) qui contiendra le dossier d’installation de jquery. Maintenant, jquery est installé dans le dossier 'bower_components'.

Étape 4: Ajoutez l'emplacement de jquery dans le fichier 'angular-cli.json'

Ouvrez le fichier 'angular-cli.json' (présent dans le dossier 'jquery-demo') et ajoutez l'emplacement de jquery dans les "scripts". Il ressemblera à ceci:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Étape 5: écrivez un code jQuery simple pour le test

Ouvrez le fichier 'app.component.html' et ajoutez une simple ligne de code. Le fichier ressemblera à ceci:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Ouvrez maintenant le fichier 'app.component.ts' et ajoutez la déclaration de variable jquery et le code de la balise 'p'. Vous devez également utiliser lifecycle hook ngAfterViewInit (). Après avoir effectué les modifications, le fichier ressemblera à ceci:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Maintenant, lancez votre application 2 angulaire en utilisant la commande 'ng serve' et testez-la. Ça devrait marcher.

24
Aman Deep Sharma

Vous pouvez implémenter le hook de cycle de vie ngAfterViewInit () pour ajouter des manipulations DOM

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Soyez prudent lorsque vous utilisez un routeur car angular2 peut recycler les vues .. vous devez donc vous assurer que les manipulations des éléments DOM ne sont effectuées que lors du premier appel de afterViewInit .. (Vous pouvez utiliser des variables booléennes statiques pour le faire)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}
13
Mourad Zouabi

Je le fais de manière plus simple - commencez par installer jquery par npm dans la console: npm install jquery -S puis dans le fichier de composant, je viens d’écrire: let $ = require('.../jquery.min.js') et cela fonctionne! Voici un exemple complet tiré de mon code:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

Dans teplate j'ai par exemple:

<div class="departments-connections-graph">something...</div>

MODIFIER

Alternativement au lieu d'utiliser:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

utilisation

declare var $: any;

et dans votre index.html, mettez:

<script src="assets/js/jquery-2.1.1.js"></script>

Cela initialisera jquery une seule fois globalement - ceci est important par exemple pour utiliser des fenêtres modales dans bootstrap ...

12
Kamil Kiełczewski

// installation de jquerynpm install jquery --save

// installation de la définition de type pour le jquerytypings install dt~jquery --global --save

// ajout de la bibliothèque jquery dans le fichier de configuration de construction, comme spécifié (fichier "angular-cli-build.js")

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// lance la construction pour ajouter la bibliothèque jquery à la construction ng build

// ajout de la configuration du chemin relatif (dans system-config.js) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// importer la bibliothèque jquery dans votre fichier composant

import 'jquery';

ci-dessous est l'extrait de code de mon exemple de composant

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}
10
BALA

étape 1: utilisez la commande: npm install jquery --save 

étape 2: vous pouvez simplement importer angular en tant que:

importer $ de 'jquery';

c'est tout .

Un exemple serait:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}
10
Laxmikanta Nayak

Si vous utilisez angular-cli, vous pouvez faire: 

  1. Installer la dépendance: 

    npm install jquery --save

    npm install @ types/jquery --save-dev

  2. Importer le fichier: 

    Ajoutez "../node_modules/jquery/dist/jquery.min.js" à la section "script" du fichier .angular-cli.json

  3. Déclarer jquery:

    Ajoutez "$" à la section "types" de tsconfig.app.json

Vous pouvez trouver plus de détails sur official angular cli doc

9
Jahal

Utiliser jquery dans angular2 (4) 

Suivez ces instructions

installer la définition de type Jquery et Juqry 

Pour l'installation de Jquery npm install jquery --save

Pour la définition du type de requête, Installation npm install @types/jquery --save-dev

puis importez simplement le jquery 

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}
8
Vasim Hayat

Depuis que je suis un cancre, j'ai pensé qu'il serait bon d'avoir un code fonctionnel. 

En outre, la version de typage Angular2 de angular-protractor a des problèmes avec jQuery$, de sorte que la réponse la plus acceptée ne me donne pas une compilation propre. 

Voici les étapes que je dois travailler: 

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

À l'intérieur de mon.component.ts

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}
4
Jon

Ecrivez 

declare var $:any;

après toutes les sections d'importation, vous pouvez utiliser jQuery et inclure la bibliothèque jQuery dans votre page index.html.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

ça a fonctionné pour moi 

2
Divyesh Patel

Je saute l'installation de jQuery car ce point a été mentionné dans tous les messages créés avant le mien. Donc, vous avez déjà installé jquery. Importer t dans votre composant comme ceci 

import * as $ from 'jquery';

fonctionnera, mais il existe un autre moyen "angulaire" de le faire en créant un service.

Étape no. 1: créer le fichier jquery.service.ts . 

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Étape. non. 2: enregistre le service dans app.module.ts 

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Étape no. 3: injecter le service dans votre composant my-super-duper.component.ts 

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

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Je serai très reconnaissant si quelqu'un peut expliquer le pour et le contre des deux méthodes: DIJQuery en tant que service vs. import * en tant que $ from 'jQuery'; 

2
azakgaim


1) Pour accéder au DOM dans le composant.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

Vous pouvez inclure jQuery de la manière suivante. 2) Incluez votre fichier jquery dans index.html avant le chargement de angular2

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Vous pouvez utiliser Jquery de la manière suivante. Ici, j’utilise le sélecteur de date JQuery Ui.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

Ce travail pour moi.

2
ayyappa maddi

Vous pouvez également essayer de l'importer avec "InjectionToken". Comme décrit ici: Utiliser jQuery dans Angular/TypeScript sans définition de type

Vous pouvez simplement injecter l'instance globale jQuery et l'utiliser. Pour cela, vous n'aurez besoin d'aucune définition de type ou typage.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

Lorsqu'il est correctement défini dans votre app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vous pouvez commencer à l'utiliser dans vos composants:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}
1
Jeffrey Rosselle

Voici ce qui a fonctionné pour moi - Angular 2 avec webpack

J'ai essayé de déclarer $ comme type any mais chaque fois que j'essayais d'utiliser un module JQuery, je recevais (par exemple) $(..).datepicker() n'est pas une fonction

Depuis que jquery est inclus dans mon fichier vendor.ts, je l’ai simplement importé dans mon composant en utilisant 

import * as $ from 'jquery';

Je peux maintenant utiliser les plugins Jquery (comme bootstrap-datetimepicker)

1
raghav710

Le moyen le plus efficace que j'ai trouvé est d'utiliser setTimeout avec un temps égal à 0 à l'intérieur du constructeur de la page/du composant. Cela permet à jQuery de s'exécuter au prochain cycle d'exécution une fois qu'Angular a fini de charger tous les composants enfants. Quelques autres méthodes de composant peuvent être utilisées, mais toutes les solutions que j'ai essayées fonctionnent mieux lorsqu'elles sont exécutées dans un setTimeout.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}
1
Urgo

Installation globale de la bibliothèque en tant que Documentation officielle ici

  1. Installer à partir de npm:

    npm install jquery --save

  2. Ajouter les fichiers de script nécessaires aux scripts:

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

Redémarrez le serveur si vous l'exécutez et qu'il devrait fonctionner sur votre application.

Si vous souhaitez utiliser un seul composant, utilisez import $ from 'jquery'; dans votre composant.

0
Amr Ibrahim

Installer jquery

Terminal $ npm install jquery

(Pour bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Ajoutez ensuite l'instruction import à app.module.ts.

import 'jquery'

(Pour bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Désormais, vous n’avez plus besoin des balises <SCRIPT> pour référencer le code JavaScript.

(Tout CSS que vous souhaitez utiliser doit toujours être référencé dans styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";
0
Carter Medlin

D'autres ont déjà posté. mais je donne un exemple simple ici pour que cela puisse aider de nouveaux arrivants.

Étape 1: dans votre référence de fichier index.html, jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Étape 2: supposons que nous voulions afficher div ou cacher div en cliquant sur un bouton:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Étape 3: Dans le fichier de composant ci-dessous, l'importation déclare $ comme ci-dessous:

declare var $: any;

que créer une fonction comme ci-dessous:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

Cela fonctionnera avec les dernières Angular et JQuery

0
Mehdi Jalal

Lorsque vous utilisez Angular, essayez de ne pas utiliser la bibliothèque jQuery. Essayez d’utiliser les fonctionnalités et les bibliothèques produites pour le framework angulaire. Si vous voulez utiliser les fonctions jquery comme find () , html () , le plus proche () et etc., je suggère d'utiliser le js pur. exemple: querySelector () , innerHTML , parentElement et etc ...

0
mojtaba ramezani

Utilisation de Angular Cli

 npm install jquery --save

Dans angular.json sous tableau de scripts

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ] //for latest version copy full path of node_modules>jquery>dist>jquery.min.js to avoid path error

Maintenant, pour utiliser jQuery, tout ce que vous avez à faire est de l'importer comme suit dans le composant que vous souhaitez utiliser.

import * as $ from 'jquery';

Par exemple, utiliser jQuery dans le composant racine

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 {


  public ngOnInit()
  {
    //jQuery code
        });
    });
  }
}
0
varundhariyal