Home Documentation Blog
Getting started General
Components
Forms
Trends
Utilities
Migrate from v1
  Join us
  Angular Articles

Qu'est-ce que PrimeNG et comment l'utiliser : guide complet avec icônes et exemples de tables

Angular

Découvrez PrimeNG, la bibliothèque complète de composants UI pour Angular avec plus de 80 composants. Apprenez à utiliser les icônes PrimeNG et les composants de table PrimeNG avec des exemples pratiques et des bonnes pratiques.

PrimeNG Angular UI Component Library
PrimeNG : bibliothèque de composants UI pour Angular

Construire des interfaces utilisateur modernes et riches en fonctionnalités dans des applications Angular peut être chronophage et complexe. C'est là qu'intervient PrimeNG, une bibliothèque open source complète de composants UI développée par PrimeTek Informatics, qui fournit plus de 80 composants personnalisables et prêts pour la production pour les applications Angular. Que vous construisiez des tableaux de données, des formulaires, des graphiques ou des tableaux de bord complexes, PrimeNG offre les outils dont vous avez besoin pour créer des interfaces utilisateur professionnelles, réactives et accessibles.

Qu'est-ce que PrimeNG ?

PrimeNG est un ensemble riche de composants UI pour Angular qui permet aux développeurs de créer des applications web modernes avec un minimum d'efforts. Il est construit au-dessus d'Angular et suit les bonnes pratiques Angular, ce qui en fait un choix naturel pour tout projet Angular. La bibliothèque inclut tout, des contrôles de formulaire de base aux composants avancés de visualisation de données, tous conçus avec une attention particulière à la cohérence, à l'accessibilité et aux performances.

L'un des plus grands atouts de PrimeNG est sa vaste bibliothèque de composants. Vous y trouverez des composants pour l'affichage de données (tables, arbres, graphiques), les entrées de formulaire (autocomplétion, sélecteurs de date, upload de fichiers), la navigation (menus, breadcrumbs, onglets), les overlays (dialogs, info-bulles, popovers) et bien plus encore. Chaque composant est hautement personnalisable via des propriétés, des événements et le theming, ce qui vous permet d'adapter parfaitement l'interface aux besoins de votre application.

PrimeNG met l'accent sur l'accessibilité, en veillant à ce que les composants fonctionnent bien avec les lecteurs d'écran et respectent les recommandations WCAG. La bibliothèque propose également un excellent support du responsive design, ce qui facilite la création d'applications qui fonctionnent parfaitement sur desktop, tablette et mobile. Avec des capacités de theming intégrées et la prise en charge de plusieurs thèmes (Material, Bootstrap et thèmes personnalisés), PrimeNG vous donne la flexibilité nécessaire pour obtenir exactement le look & feel que vous souhaitez.

Fonctionnalités clés de PrimeNG

  • 80+ composants : bibliothèque complète couvrant tous les besoins UI, des entrées de base à la visualisation de données avancée
  • Intégration Angular : conçu spécifiquement pour Angular avec support complet de TypeScript
  • Accessibilité : composants conformes WCAG avec attributs ARIA et navigation au clavier
  • Theming : plusieurs thèmes intégrés plus la prise en charge de thèmes personnalisés
  • Responsive design : approche mobile-first avec des composants responsives
  • TypeScript : support complet avec définitions de types détaillées
  • Performances : composants optimisés avec lazy loading et virtual scrolling

Bien démarrer avec PrimeNG

Installer PrimeNG dans votre projet Angular est simple. Vous devez installer la bibliothèque principale et éventuellement inclure un thème. Voici comment commencer :

Installation

# Installer PrimeNG
npm install primeng

# Installer PrimeIcons (optionnel mais recommandé)
npm install primeicons

# Installer un thème (au choix)
npm install primeicons-themes

Configuration de base

Après l'installation, vous devez importer les styles PrimeNG et configurer votre module Angular. Voici une configuration de base : 

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

// Import des modules PrimeNG nécessaires
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Requis pour les animations PrimeNG
    TableModule,
    ButtonModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dans votre styles.scss ou dans angular.json, ajoutez le thème PrimeNG et PrimeIcons : 

// styles.scss
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";
@import "primeicons/primeicons.css";

PrimeNG Icons

PrimeIcons est la bibliothèque d'icônes de PrimeNG, qui fournit plus de 250 icônes open source conçues pour fonctionner parfaitement avec les composants PrimeNG. Ces icônes sont basées sur des polices, ce qui les rend légères, scalables et faciles à personnaliser avec du CSS.

PrimeIcons utilise une syntaxe simple basée sur des classes, facile à mémoriser et à implémenter. Les icônes sont cohérentes visuellement et conçues pour compléter les composants PrimeNG, même si elles peuvent être utilisées indépendamment dans n'importe quelle application Angular.

Installation de PrimeIcons

PrimeIcons est installé séparément de PrimeNG. Après l'installation, vous devez importer le fichier CSS : 

npm install primeicons

Puis importez le CSS dans votre fichier styles.scss : 

@import "primeicons/primeicons.css";

Utilisation de base

PrimeIcons utilise la syntaxe de classe pi pi-{icon-name}. Il suffit d'ajouter les classes sur un élément <i> : 

<!-- Icône de base -->
<i class="pi pi-check"></i>

<!-- Icône avec taille et couleur personnalisées -->
<i class="pi pi-user" style="font-size: 2rem; color: #007bff;"></i>

<!-- Icône dans un bouton -->
<button class="btn">
  <i class="pi pi-save"></i> Save
</button>

Exemples courants de PrimeIcons

Voici quelques icônes PrimeIcons couramment utilisées avec leurs noms de classes : 

<!-- Icônes de navigation -->
<i class="pi pi-home"></i>        <!-- Home -->
<i class="pi pi-user"></i>         <!-- User -->
<i class="pi pi-cog"></i>          <!-- Settings -->
<i class="pi pi-search"></i>        <!-- Search -->

<!-- Icônes d'action -->
<i class="pi pi-check"></i>        <!-- Check -->
<i class="pi pi-times"></i>       <!-- Close -->
<i class="pi pi-trash"></i>        <!-- Delete -->
<i class="pi pi-pencil"></i>       <!-- Edit -->
<i class="pi pi-save"></i>         <!-- Save -->

<!-- Icônes de fichiers et documents -->
<i class="pi pi-file"></i>        <!-- File -->
<i class="pi pi-folder"></i>      <!-- Folder -->
<i class="pi pi-download"></i>     <!-- Download -->
<i class="pi pi-upload"></i>       <!-- Upload -->

<!-- Flèches de navigation -->
<i class="pi pi-chevron-left"></i>  <!-- Left arrow -->
<i class="pi pi-chevron-right"></i> <!-- Right arrow -->
<i class="pi pi-arrow-up"></i>     <!-- Up arrow -->
<i class="pi pi-arrow-down"></i>   <!-- Down arrow -->

Utiliser PrimeIcons avec les composants PrimeNG

PrimeIcons s'intègre parfaitement avec les composants PrimeNG. La plupart des composants PrimeNG acceptent une propriété icon : 

<!-- Bouton avec icône -->
<p-button label="Save" icon="pi pi-check"></p-button>

<!-- Bouton avec icône à droite -->
<p-button label="Download" icon="pi pi-download" iconPos="right"></p-button>

<!-- Bouton avec uniquement une icône -->
<p-button icon="pi pi-trash" [rounded]="true" severity="danger"></p-button>

<!-- Menu avec icônes -->
<p-menu [model]="items"></p-menu>
// component.ts
export class MyComponent {
  items = [
    {
      label: 'Home',
      icon: 'pi pi-home',
      command: () => this.navigateHome()
    },
    {
      label: 'Settings',
      icon: 'pi pi-cog',
      command: () => this.openSettings()
    },
    {
      label: 'Logout',
      icon: 'pi pi-sign-out',
      command: () => this.logout()
    }
  ];
}

Personnaliser PrimeIcons

Comme PrimeIcons est basé sur une police, vous pouvez facilement le personnaliser avec du CSS : 

// Styles personnalisés pour les icônes
.my-icon {
  font-size: 1.5rem;
  color: #007bff;
  margin-right: 0.5rem;
  
  &:hover {
    color: #0056b3;
    transform: scale(1.1);
    transition: all 0.2s;
  }
}
<i class="pi pi-star my-icon"></i>

PrimeNG Table

Le composant PrimeNG Table est l'un des composants les plus puissants et les plus complets de la bibliothèque PrimeNG. Il fournit une solution complète pour afficher des données sous forme de tableau avec une prise en charge intégrée du tri, du filtrage, de la pagination, de la sélection de lignes, de l'édition, et bien plus encore.

Le composant Table utilise des templates Angular pour une flexibilité maximale, ce qui vous permet de personnaliser les en-têtes, les cellules et les pieds de page avec votre propre HTML et vos directives Angular. Cette approche basée sur les templates vous donne un contrôle total sur l'apparence et le comportement du tableau tout en bénéficiant des fonctionnalités intégrées de PrimeNG.

Configuration de base d'une table

Pour utiliser la table PrimeNG, commencez par importer le module TableModule dans votre module Angular : 

import { TableModule } from 'primeng/table';

@NgModule({
  imports: [TableModule]
})
export class AppModule { }

Exemple de table simple

Voici un tableau simple affichant des données de produits : 

<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template #body let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>
// component.ts
export class ProductTableComponent {
  products = [
    { code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
    { code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 },
    { code: 'P003', name: 'Keyboard', category: 'Accessories', quantity: 15 },
    { code: 'P004', name: 'Monitor', category: 'Electronics', quantity: 8 }
  ];
}

Colonnes dynamiques

Vous pouvez définir des colonnes dynamiquement en utilisant la directive Angular *ngFor : 

<p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header let-columns>
        <tr>
            @for (col of columns; track col) {
                <th>
                    {{ col.header }}
                </th>
            }
        </tr>
    </ng-template>
    <ng-template #body let-rowData let-columns="columns">
        <tr>
            @for (col of columns; track col) {
                <td>
                    {{ rowData[col.field] }}
                </td>
            }
        </tr>
    </ng-template>
</p-table>
// component.ts
export class DynamicTableComponent {
  cols = [
    { field: 'code', header: 'Code' },
    { field: 'name', header: 'Name' },
    { field: 'category', header: 'Category' },
    { field: 'quantity', header: 'Quantity' }
  ];

  products = [
    { code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
    { code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 }
  ];
}

Table avec tri

Ajouter le tri à votre tableau est aussi simple que de définir la propriété pSortableColumn sur les colonnes : 

<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header>
        <tr>
            <th pSortableColumn="code">
                Code <p-sortIcon field="code"></p-sortIcon>
            </th>
            <th pSortableColumn="name">
                Name <p-sortIcon field="name"></p-sortIcon>
            </th>
            <th pSortableColumn="category">
                Category <p-sortIcon field="category"></p-sortIcon>
            </th>
            <th pSortableColumn="quantity">
                Quantity <p-sortIcon field="quantity"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template #body let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

N'oubliez pas d'importer SortIcon : 

import { SortIcon } from 'primeng/sorticon';

Table avec pagination

Ajoutez la pagination pour gérer efficacement les grands jeux de données : 

<p-table 
    [value]="products" 
    [paginator]="true" 
    [rows]="10"
    [rowsPerPageOptions]="[5, 10, 20, 50]"
    [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header>
        <tr>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template #body let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

Table avec filtrage

Activez le filtrage pour permettre aux utilisateurs de rechercher dans les données du tableau : 

<p-table 
    [value]="products" 
    [globalFilterFields]="['name', 'category']"
    [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template #header>
        <tr>
            <th>
                <div class="flex justify-content-between align-items-center">
                    Code
                    <p-columnFilter type="text" field="code"></p-columnFilter>
                </div>
            </th>
            <th>
                <div class="flex justify-content-between align-items-center">
                    Name
                    <p-columnFilter type="text" field="name"></p-columnFilter>
                </div>
            </th>
            <th>
                <div class="flex justify-content-between align-items-center">
                    Category
                    <p-columnFilter type="text" field="category"></p-columnFilter>
                </div>
            </th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template #body let-product>
        <tr>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>

Table avec sélection de lignes

Activez la sélection de lignes avec des cases à cocher ou des boutons radio : 

<p-table 
    [value]="products" 
    [(selection)]="selectedProducts"
    [tableStyle]="{ 'min-width': '50rem' }"
    dataKey="code">
    <ng-template #header>
        <tr>
            <th style="width: 3rem">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <th>Code</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </ng-template>
    <ng-template #body let-product>
        <tr>
            <td>
                <p-tableCheckbox [value]="product"></p-tableCheckbox>
            </td>
            <td>{{ product.code }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>{{ product.quantity }}</td>
        </tr>
    </ng-template>
</p-table>
// component.ts
export class SelectableTableComponent {
  selectedProducts: any[] = [];

  products = [
    { code: 'P001', name: 'Laptop', category: 'Electronics', quantity: 10 },
    { code: 'P002', name: 'Mouse', category: 'Accessories', quantity: 25 }
  ];
}

Exemple complet de table avec plusieurs fonctionnalités

Voici un exemple complet combinant tri, pagination, filtrage et templates personnalisés : 

<p-table 
    [value]="products" 
    [paginator]="true" 
    [rows]="10"
    [rowsPerPageOptions]="[5, 10, 20]"
    [globalFilterFields]="['name', 'category']"
    [tableStyle]="{ 'min-width': '60rem' }">
    
    <ng-template #caption>
        <div class="flex items-center justify-between">
            <span class="text-xl font-bold">Products</span>
            <p-button icon="pi pi-refresh" [rounded]="true" [raised]="true"></p-button>
        </div>
    </ng-template>
    
    <ng-template #header>
        <tr>
            <th pSortableColumn="name">
                Name <p-sortIcon field="name"></p-sortIcon>
            </th>
            <th>Image</th>
            <th pSortableColumn="price">
                Price <p-sortIcon field="price"></p-sortIcon>
            </th>
            <th pSortableColumn="category">
                Category <p-sortIcon field="category"></p-sortIcon>
            </th>
            <th>Status</th>
        </tr>
    </ng-template>
    
    <ng-template #body let-product>
        <tr>
            <td>{{ product.name }}</td>
            <td>
                <img 
                    [src]="'https://example.com/images/' + product.image" 
                    [alt]="product.name"
                    class="w-24 rounded" />
            </td>
            <td>{{ product.price | currency: 'USD' }}</td>
            <td>{{ product.category }}</td>
            <td>
                <p-tag 
                    [value]="product.inventoryStatus" 
                    [severity]="getSeverity(product.inventoryStatus)">
                </p-tag>
            </td>
        </tr>
    </ng-template>
    
    <ng-template #footer>
        <tr>
            <td colspan="5">
                In total there are {{ products ? products.length : 0 }} products.
            </td>
        </tr>
    </ng-template>
</p-table>

Bonnes pratiques

1. Importer uniquement ce dont vous avez besoin

PrimeNG est compatible avec le tree-shaking, donc importez uniquement les modules que vous utilisez réellement pour garder la taille du bundle réduite : 

// ✅ Bon : importez des modules spécifiques
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';

// ❌ À éviter : ne pas tout importer
// import { PrimeNG } from 'primeng';

2. Utiliser le lazy loading pour les grandes tables

Pour les tables avec de grands volumes de données, utilisez le lazy loading pour améliorer les performances : 

<p-table 
    [value]="products" 
    [lazy]="true"
    (onLazyLoad)="loadProducts($event)"
    [totalRecords]="totalRecords">
</p-table>

3. Optimiser l'utilisation des icônes

PrimeIcons étant basées sur une police, elles sont légères. Cependant, si vous n'avez besoin que de quelques icônes, envisagez d'utiliser des icônes SVG pour encore plus de performances.

4. Personnaliser les thèmes

Créez des thèmes personnalisés pour correspondre à votre identité de marque. Le système de theming de PrimeNG utilise des variables CSS, ce qui facilite la personnalisation : 

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  // ... autres variables de thème
}

Conclusion

PrimeNG est une bibliothèque de composants UI puissante et complète qui peut accélérer considérablement votre développement Angular. Avec plus de 80 composants, des options de theming étendues et un excellent support de l'accessibilité, elle fournit tout ce dont vous avez besoin pour construire des applications professionnelles et prêtes pour la production.

La bibliothèque PrimeNG Icons propose plus de 250 icônes qui s'intègrent parfaitement aux composants PrimeNG et peuvent être facilement personnalisées avec du CSS. Le composant PrimeNG Table est l'une des implémentations de tableau les plus complètes disponibles pour Angular, avec prise en charge du tri, du filtrage, de la pagination, de la sélection de lignes et bien plus encore.

Que vous construisiez un simple tableau de bord d'administration ou une application d'entreprise complexe, PrimeNG fournit les outils et les composants dont vous avez besoin. L'accent mis par la bibliothèque sur l'accessibilité, les performances et la personnalisation en fait un excellent choix pour tout projet Angular.

Pour commencer, visitez le site web de PrimeNG pour explorer l'ensemble de la bibliothèque de composants, consultez la documentation PrimeIcons pour voir les icônes disponibles, et plongez dans la documentation du composant Table pour les fonctionnalités avancées. Avec PrimeNG, vous construirez en un rien de temps de belles applications Angular fonctionnelles.

Catégories

Tous les articles
Android (1)
Angular (1)
Axentix (2)
Axios (1)
CSS (3)
Cursor (1)
Http (1)
JavaScript (13)
NativeWind (1)
Shacdn (2)
Tamagui (3)
WebSockets (1)

Commencez à créer avec Axentix

Prêt à créer des sites web exceptionnels ? Commencez avec le framework Axentix dès aujourd'hui.

Commencer

Articles similaires

npx shadcn-ui@latest init : initialiser la configuration et les dépendances d'un nouveau projet recommended article

npx shadcn-ui@latest init : initialiser la configuration et les dépendances d'un nouveau projet

Comment utiliser npx shadcn-ui@latest init (et le shadcn@latest init actuel) pour initialiser la configuration et les dépendances, ainsi que ce qu’il faut faire lorsque les commandes shadcn-ui ne fonctionnent pas.

Read article
Qu’est-ce que le 405 Method Not Allowed : comment corriger les erreurs HTTP 405 recommended article

Qu’est-ce que le 405 Method Not Allowed : comment corriger les erreurs HTTP 405

Apprenez ce qui provoque l’erreur HTTP 405 Method Not Allowed et comment la corriger. Comprenez les restrictions de méthode, les configurations serveur et le dépannage d’API avec des solutions pratiques.

Read article
Concatener des chaines en JavaScript : guide complet recommended article

Concatener des chaines en JavaScript : guide complet

Apprenez toutes les methodes pour concatener des chaines en JavaScript, y compris l’operateur +, les template literals, concat(), et join(). Guide complet avec exemples, comparaisons de performance et bonnes pratiques.

Read article