Présentation et installation de PrimeNG

Dans cet article, vous allez découvrir la librairie PrimeNG qui est de plus en plus populaire sur les projets Angular, que ce soit pour des projets personnels ou en entreprise.

Si vous préférez le format vidéo, voici la vidéo YouTube correspondante à cet article.

Une librairie ultra complète

PrimeNG est une librairie qui fournit des composants Angular qui existe depuis la sortie d'Angular2 en 2016 et qui a plus de 9000 étoiles sur GitHub.

C'est un produit du groupe PrimeFaces qui fournit d'autres librairies comme PrimeReact pour React et PrimeVue pour VueJs.

PrimeNG est surtout connu et apprécié pour son nombre colossal de composants, avec plus de 80 composants en version 17.

Tous ces composants nous permettent d'avoir tout ce dont nous avons besoin pour nos projets Angular, sans avoir à importer des composants de d'autres librairies. Cela permet d'avoir une même logique de code dans toutes l'applications et d'avoir un code uniforme, facile à maintenir.

Exemple de composants PrimeNG

PrimeNG fournit aussi de nombreux thèmes dont ceux de Bootstrap et Material Design pour customiser notre application. Si besoin, ces thèmes sont customisables grâce aux variables CSS fournies par la librairie.

Thèmes fournis par PrimeNG

Comparaison avec d'autres librairies

Voyons voir maintenant les différences avec des librairies populaires comme Bootstrap et Material.

PrimeNG vs Bootstrap

Il y'a aujourd'hui deux packages pour utiliser la librairie CSS Bootstrap dans Angular : NgBootstrap et NgxBootstrap

Bien que la librairie CSS Bootstrap ait une influence énorme dans le monde du développement web, nous voyons que PrimeNG dépasse maintenant les deux packages Angular et continu de monter en popularité.

PrimeNG dépasse les deux packages Angular pour Bootstrap

Voyons les avantages et les inconvénients d'utiliser Bootstrap par rapport à PrimeNG.

Avantages de Bootstrap par rapport à PrimeNG

Bootstrap est une librairie CSS très populaire, connue par la plupart des développeurs

Inconvénients de Bootstrap par rapport à PrimeNG

Bootstrap fournit beaucoup moins de composants Angular avec seulement 19 composants pour NgBootstrap et 17 composants pour NgxBootstrap
Utiliser Bootstrap nécessite la plupart du temps d'ajouter des librairies de composants supplémentaires
(Exemple : Bootstrap, NgBootstrap, Select2)
Beaucoup moins de thèmes proposés
Les librairies Angular pour Bootstrap ne sont pas gérées par les créateurs de Bootstrap
Il y'a deux librairies Angular pour Bootstrap qui se battent en duel au lieu d'avoir une seule librairie sur laquelle tous les développeurs travaillent et échangent.

PrimeNG vs Material

La librairie de composants Angular Material est une librairie très populaire depuis la création d'Angular avec plus de 24 000 étoiles sur GitHub.

Cela est dû principalement au fait que cette librairie est gérée et promue depuis le début par l'équipe Angular.

Angular Material (angular/components) est toujours très populaire

Néanmoins, Material possède moins de composants que PrimeNG et il est souvent nécessaire d’avoir plusieurs librairies sur son projet.

Par contre les composants Material sont généralement plus fiables, moins bugués, cela est dû au plus faible nombre de composants et car cette librairie est gérée par la team Angular.

Commentaire Reddit sur Material

Enfin, c’est subjectif, mais le style des composants Material est très spécial et va facilement faire ressembler votre site Angular à une application Android.

Voyons les avantages et les inconvénients d'utiliser Material par rapport à PrimeNG.

Avantages de Material par rapport à PrimeNG

Material est encore aujourd'hui plus populaire que PrimeNG
Les composants Material sont considérés comme plus fiables

Inconvénients de Material par rapport à PrimeNG

Material propose beaucoup moins de composants que PrimeNG avec seulement 40 composants Material contre 80 composants PrimeNG
La librairie nécessite souvent des librairies de composants supplémentaires
Beaucoup moins de thèmes proposés
Le thème de Material de type "Application Android" (Subjectif)

Quand choisir PrimeNG ?

PrimeNG permet de construire des applications complètes de manière uniforme, en utilisant une seule librairie de composant. Vous n’aurez pas besoin d’autres framework pour votre application et cela va améliorer la Developer Experience.

Pour moi, PrimeNG est le framework le plus intéressant aujourd’hui pour nos applications Angular et je le choisirai en priorité.

Je vois quand même des raisons pertinentes à ne pas choisir PrimeNG, voici ces raisons :

Vos équipes de développeurs maitrisent déjà un autre framework comme Material ou NgBootstrap et vous devez livrer rapidement des features
Votre pôle informatique possèdent déjà de nombreuses applications avec Material ou Bootstrap et vous devez continuer sur ces librairies pour garder des applications uniformes
Vous avez essayé chaque librairie et vous avez un coup de coeur pour une autre librairie. Suivez la librairie qui vous fait prendre le plus de plaisir, la Developer Experience est très importante 😉

Installation de PrimeNG

Pour installer PrimeNG sur nos projets Angular, c’est très simple, il nous suffit d’installer le package NPM de PrimeNG.

npm install --save primeng

Ensuite nous devons importer le CSS du package et du thème souhaité dans le style de notre application.

"styles": [
    "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
    "node_modules/primeng/resources/primeng.min.css",
    "src/styles.scss"
]

Fichier angular.json

Ensuite nous devons activer les animations Angular pour les composants PrimeNG avec des animations.

Pour les applications avec Standalone Components, ajoutez provideAnimations dans la configuration de l'application Angular.

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()]
};

Fichier app.config.ts

Pour les applications utilisant des modules, importez le module BrowserAnimationsModule dans le AppModule.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
})
export class AppModule { }

Fichier app.module.ts

Utilisation des composants PrimeNG

Maintenant que PrimeNG est installé sur notre projet Angular, nous pouvons utiliser ses composants.

Pour être utilisé, chaque composant doit être importé, soit dans un module, soit dans votre Standalone Component.

Exemple avec le composant Button

Voici par exemple l'utilisation du composant Button de PrimeNG, qui nécessite l'import du ButtonModule.

<p-button size="large" label="Button" (onClick)="doSomething()"></p-button>

Fichier example.component.html

import { Component } from '@angular/core';
import { ButtonModule } from "primeng/button";

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonModule],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss'
})
export class ExampleComponent {

  doSomething() {
    console.log('Doing something...');
  }
}

Fichier example.component.ts

Le bouton de PrimeNG s'affiche correctement avec le style du thème choisit.

Composant Button de PrimeNG

Exemple avec le composant MultiSelect

Voici un autre exemple avec le composant MultiSelect de PrimeNG, qui nécessite l'import du MultiSelectModule.

<p-multiSelect
  [options]="cities"
  [(ngModel)]="selectedCities"
  optionLabel="name"
  optionValue="code"
  placeholder="Select..."
  [showClear]="true"></p-multiSelect>

Fichier example.component.html

import { Component } from '@angular/core';
import { MultiSelectModule } from "primeng/multiselect";
import { FormsModule } from "@angular/forms";

interface City {
  name: string,
  code: string
}

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [FormsModule, MultiSelectModule],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss'
})
export class ExampleComponent {

  cities: City[] = [
    {name: 'New York', code: 'NY'},
    {name: 'Rome', code: 'RM'},
    {name: 'London', code: 'LDN'},
    {name: 'Istanbul', code: 'IST'},
    {name: 'Paris', code: 'PRS'}
  ]

  selectedCities: City[] = [];

}

Fichier example.component.ts

Le composant MultiSelect fonctionne correctement.

Composant MultiSelect de PrimeNG

Comme beaucoup d'autres composants, le composant MultiSelect possède de nombreuses fonctionnalités activables selon les besoins. Comme customiser le template des lignes, avoir un bouton Select All, activer le Virtual Scroll pour gérer les large datasets.

Parcourir les composants

N'hésitez pas à parcourir la documentation de PrimeNG pour voir l'ensemble des composants fournis par la librairie.

Vous pouvez aussi voir le projet Sakai-ng de PrimeNG, qui permet de voir rapidement l'ensemble des composants PrimeNG.

Projet Sakai NG

Il est aussi possible d'exécuter le projet Sakai-ng en local, cela permet de facilement travailler sur un thème personnalisé.

Conclusion

Nous avons vu ensemble les points forts de PrimeNG par rapport à d'autres librairies comme Material et Bootstrap. Et nous avons vu comment l'installer et utiliser ses composants dans notre application Angular.

Il existe énormément de composants PrimeNG avec de nombreuses fonctionnalités, n'hésitez pas à aller voir la documentation pour aller plus loin.

Abonnez vous pour ne pas rater les nouveaux articles !