Comment utiliser jQuery avec Angular?

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

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

Je suis conscient qu'il existe des solutions de contournement comme la manipulation de la classe ou de l' ID de l'élément DOM à l'avance, mais j'espère une façon plus propre de le faire.

L'utilisation de jQuery d'Angular2 est un jeu d'enfant par rapport à ng1. Si vous utilisez TypeScript, vous pouvez d'abord référencer la définition de typeScript jQuery.

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

TypescriptDefinitions ne sont pas requis car vous pouvez simplement utiliser anycomme type pour $oujQuery

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

Déclarer $(ou jQuery) comme JQueryStatic vous donnera une référence typé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 de chosenne pas être une propriété sur $, pour résoudre ce problème, vous pouvez ajouter une définition à l'interface JQuery dans votre fichier personnalisé * .d.ts

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

Pourquoi tout le monde en fait-il une science fusée? Pour toute autre personne qui a besoin de faire des choses de base sur des éléments statiques, par exemple, bodytag, faites simplement ceci:

1. Dans index.html, ajoutez une scriptbalise 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 une version inférieure de jquery pour IE9 et moins).
2. Dans votre export componentbloc ont une fonction qui appelle votre code: $("body").addClass("done");Normalement, cela provoque une erreur de déclaration, donc juste après toutes les importations dans ce fichier .ts, ajoutez declare var $:any;et vous êtes prêt à partir!

C'est ce qui a fonctionné pour moi.

ÉTAPE 1 - Tout 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();

#MISE À JOUR - Feb - 2017

Dernièrement, j'écris du code avec ES6au lieu de typescriptet je peux m'en importpasser * as $dans le import statement. Voici à quoi cela ressemble maintenant:

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

Bonne chance.

Maintenant, c'est devenu très facile, vous pouvez le faire en déclarant simplement la variable jQuery avec n'importe quel type à l'intérieur du contrôleur Angular2.

declare var jQuery:any;

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

Pour accéder à n'importe quel élément avec l'id X ou la classe X, il suffit de faire

jQuery("#X or .X").someFunc();

Un moyen simple:

1. inclure le script

index.html

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

2. déclarer

my.component.ts

declare var $: any;

3. utiliser

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

Veuillez suivre ces étapes simples. Ça a marché pour moi. Commençons par une nouvelle application angulaire 2 pour éviter toute confusion. J'utilise Angular cli. Alors, installez-le si vous ne l'avez pas déjà. https://cli.angular.io/

Étape 1: créer une application de démonstration angular 2

ng new jquery-demo

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

ng serve

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

Étape 2: installer Bower (un gestionnaire de packages 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 une installation réussie de bower, créez un fichier 'bower.json' en utilisant la commande ci-dessous:

bower init

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

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: installer jquery

Exécutez cette commande

bower install jquery --save

Il créera un nouveau dossier (bower_components) qui contiendra le dossier d'installation de jquery. Vous avez maintenant installé jquery dans le dossier 'bower_components'.

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

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

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

Étape 5: Écrire un code jquery simple pour les tests

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>

Maintenant, ouvrez le fichier «app.component.ts» et ajoutez la déclaration de variable jquery et le code pour la balise «p». Vous devez également utiliser le hook de cycle de vie ngAfterViewInit (). Après avoir apporté des 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 angular 2 en utilisant la commande 'ng serve' et testez-la. Ça devrait marcher.

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 le routeur car angular2 peut recycler les vues .. vous devez donc être sûr 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;
        }
    }
}

Je le fais de manière plus simple - installez d'abord jquery par npm dans la console: npm install jquery -Spuis dans le fichier composant j'écris simplement: let $ = require('.../jquery.min.js')et ça marche! Voici un exemple complet 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});
      ...
    }
}

En teplate j'ai par exemple:

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

ÉDITER

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 n'initialisera jquery qu'une seule fois dans le monde - c'est important par exemple pour utiliser des fenêtres modales dans le bootstrap ...

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

étape 2: vous pouvez simplement importer angulaire comme:

importer $ depuis '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'));
  }


}

// installation de jquerynpm install jquery --save

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

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

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

// exécute la build pour ajouter la bibliothèque jquery dans la build 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 de 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(){}
}

Si vous utilisez angular-cli, vous pouvez faire:

1. Installez la dépendance :

   npm install jquery --save

   npm install @ types / jquery --save-dev

2. Importez le fichier :

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

3. Déclarez jquery :

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

Vous pouvez trouver plus de détails sur le doc angulaire officiel

Pour utiliser Jquery dans Angular2 (4)

Suivez ces étapes

installer la définition de type Jquery et Juqry

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

Pour l'installation de définition de type Jquery 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 
}

Utiliser Angular Cli

 npm install jquery --save

Dans angular.json sous le tableau des scripts

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative 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 jQuery.

Par exemple, importer et utiliser jQuery dans le composant racine

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Depuis que je suis un cancre, je pensais que ce serait bien d'avoir du code de travail.

En outre, la version de typage angulaire de angular-rapporteur a des problèmes avec jQuery$ , donc la réponse acceptée en haut ne me donne pas une compilation claire.

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 my.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);

    }
}

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 marché pour moi

1) Pour accéder à 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 les charges 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.

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

import * as $ from 'jquery';

fonctionnera, mais il existe une autre manière «angulaire» de le faire en créant un service.

Étape no. 1: créez 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: enregistrez 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: injectez 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 les avantages et les inconvénients des deux méthodes: DI jquery en tant que service vs import * as $ from 'jquery';

Le moyen le plus efficace que j'ai trouvé est d'utiliser setTimeout avec un temps de 0 à l'intérieur du constructeur de page / composant. Cela permet d'exécuter jQuery dans le prochain cycle d'exécution après que Angular ait terminé de charger tous les composants enfants. Quelques autres méthodes de composants pourraient être utilisées, mais tout ce que j'ai essayé fonctionne mieux lorsqu'il est exécuté dans un setTimeout.

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

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

J'ai essayé de déclarer $comme type anymais chaque fois que j'ai essayé d'utiliser un module JQuery que j'obtenais (par exemple) $(..).datepicker()n'est pas une fonction

Étant donné que Jquery est inclus dans mon fichier vendor.ts, je l'ai simplement importé dans mon composant à l'aide de

import * as $ from 'jquery';

Je suis capable d'utiliser des plugins Jquery (comme bootstrap-datetimepicker) maintenant

Vous pouvez également essayer de l'importer avec le "InjectionToken". Comme décrit ici: Utilisez 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 pas besoin de définitions de type ou de saisies.

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();
    }
}

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

1. Installer à partir de npm:

   npm install jquery --save

2. Ajoutez 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 il devrait fonctionner sur votre application.

Si vous souhaitez utiliser à l'intérieur d'un composant unique, utilisez l' import $ from 'jquery';intérieur de votre composant

D'autres déjà publiés. mais je donne un exemple simple ici afin que cela puisse aider certains 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 voulons afficher div ou masquer 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 composants 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

Tout d'abord, installez jQuery en utilisant npm comme suit:

npm install jquery — save

Ensuite, accédez au fichier ./angular-cli.json à la racine de votre dossier de projet CLI Angular, recherchez la propriété scripts: [] et incluez le chemin d'accès à jQuery comme suit:

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

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

import * as $ from 'jquery';
(or)
declare var $: any;

Jetez un œil au code ci-dessous qui utilise jQuery pour animer div au clic, en particulier dans la deuxième ligne. Nous importons tout sous forme de $ à partir de 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");
        });
    });
  }
}

Installer jquery

Terminal $ npm install jquery

(Pour bootstrap 4 ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Ajoutez ensuite l' importinstruction à app.module.ts.

import 'jquery'

(Pour bootstrap 4 ...)

import 'popper.js'
import 'bootstrap'

Désormais, vous n'aurez plus besoin de <SCRIPT>balises pour référencer le JavaScript.

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

@import "~bootstrap/dist/css/bootstrap.min.css";

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 cadre angulaire. Si vous souhaitez utiliser les fonctions jquery comme find () , html () , le plus proche () et etc., je suggère d'utiliser les js purs. exemple: querySelector () , innerHTML , parentElement et etc ...