Comment utiliser le plugin JQuery dans Angular 4 (et les versions plus récentes) ?

La librairie JQuery est conçue pour faciliter le développement en JavaScript. Elle simplifie l'écriture du code et apporte des méthodes qui en font une référence dans le développement en JavaScript. La dernière norme ES6 du langage a d'ailleurs repris certaines fonctions de la librairie pour les intégrer nativement dans le langage. Si vous utilisez le framework Angular, il est possible d'intégrer JQuery à votre application ou site internet. Il existe deux méthodes différentes selon vos besoins et la plateforme sur laquelle vous travaillez.

Si vous développez une application, vous devez récupérer la librairie puis l'intégrer directement au sein de celle-ci. Vous pouvez l'installer en utilisant le gestionnaire de paquets NPM.

npm install jquery --save

Vous devez également installer le paquet "@types/jquery". Ce paquet ajoute les types nécessaires pour utiliser JQuery avec le langage TypeScript.

npm install --save-dev @types/jquery

Pour terminer la configuration, il ne vous reste qu'à intégrer le chemin vers le script de JQuery à la liste des scripts chargés par l'application. Il faut pour cela vous rendre dans le fichier "angular.json" (ou "angular-cli.json" sur les versions antérieures du framework) et modifier la section "scripts".

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

Pour utiliser JQuery dans un composant, importez-le dans le fichier TypeScript (".ts").

import * as $ from 'jquery';
Vous pouvez maintenant utilisez JQuery.
export class textJQueryComponent implements OnInit {
  constructor() {
  }
  ngOnInit() {
    $(window).click(function () {
      alert('JQuery est installé');
    });
  }
}

Si vous développez un site internet, il existe une autre solution : faire appel à un CDN. Il s'agit d'un serveur qui héberge en permanence les versions de la librairie JQuery. Vous n'avez pas à installer la librairie et vous utilisez la vitesse et la performance de services conçus spécifiquement dans ce but. Pour récupérer JQuery à partir d'un CDN, utilisez une balise <script> dans le fichier "index.html" de votre site.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Vous pouvez alors utiliser directement JQuery dans vos composants. Il suffit d'écrire la directive "declare" afin de déclarer les deux notations possibles de la librairie : "jquery" et "$".

import { Component } from '@angular/core';
declare var jquery:any;
declare var $ :any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular avec JQuery';
  //Fonction qui fait appel à JQuery pour masquer ou afficher le titre de la page.
  toggleTitle(){
    $('.title').slideToggle();
  }
}

Voici le code HTML pour afficher le titre de la page avec Angular et JQuery.

<h1 class="title" style="display:none">{{title}}</h1>
<button (click)="toggleTitle()">Afficher le titre</button>