Pipes

Pipes

Un pipe transforme une valeur directement dans le template, sans avoir à modifier la donnée d'origine dans la classe du composant. 3 leçons (avec cours, exemple, exercice), suivies de la conclusion du tutoriel "Apprendre Angular".

Prérequis : avoir lu les pages Services et Injection-de-dependances.

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? Une fonction de transformation utilisable directement dans un template avec la syntaxe {{ valeur | nomDuPipe }}, intégrée (date, currency...) ou personnalisée (@Pipe).
• À quoi ça sert ? À changer l'affichage d'une donnée (format de date, devise, majuscules, texte tronqué...) sans modifier la donnée d'origine dans la classe du composant.
• Pourquoi ? Sans pipe, il faudrait écrire une méthode de formatage dans chaque composant qui affiche cette donnée, ce qui duplique du code. Le pipe centralise cette logique de présentation et la rend réutilisable dans n'importe quel template.

Sommaire

1. Formatage des données avec des pipes
2. Créer un pipe
3. Prochaines étapes

---

1. Formatage des données avec des pipes

Cours

La syntaxe d'un pipe dans un template est {{ valeur | nomDuPipe }}. Angular fournit plusieurs pipes intégrés, parmi les plus utilisés :

Pipe	Rôle	Exemple
DatePipe	Formate une date	{{ date | date:'dd/MM/yyyy' }}
CurrencyPipe	Formate une devise	{{ prix | currency:'EUR' }}
UpperCasePipe / LowerCasePipe	Change la casse	{{ nom | uppercase }}
DecimalPipe	Formate un nombre	{{ valeur | number:'1.2-2' }}

Les pipes intégrés doivent être importés individuellement (ils sont standalone) dans le tableau imports du composant.

Exemple

import { Component } from '@angular/core';
import { CurrencyPipe, DatePipe } from '@angular/common';

@Component({
  selector: 'app-facture',
  imports: [CurrencyPipe, DatePipe],
  template: `
    <p>Montant : {{ montant | currency:'EUR' }}</p>
    <p>Date : {{ date | date:'dd/MM/yyyy' }}</p>
  `,
})
export class Facture {
  montant = 149.9;
  date = new Date();
}

Exercice

Crée un composant FicheProduit qui affiche un nom de produit en majuscules (uppercase), un prix formaté en euros (currency:'EUR'), et une date de sortie formatée dd/MM/yyyy (date).

Solution

import { Component } from '@angular/core';
import { CurrencyPipe, DatePipe, UpperCasePipe } from '@angular/common';

@Component({
  selector: 'app-fiche-produit',
  imports: [CurrencyPipe, DatePipe, UpperCasePipe],
  template: `
    <h3>{{ nom | uppercase }}</h3>
    <p>{{ prix | currency:'EUR' }}</p>
    <p>Sorti le {{ dateSortie | date:'dd/MM/yyyy' }}</p>
  `,
})
export class FicheProduit {
  nom = 'clavier mécanique';
  prix = 79.99;
  dateSortie = new Date('2026-03-01');
}

---

2. Créer un pipe

Cours

On peut créer un pipe personnalisé en implémentant l'interface PipeTransform et en décorant la classe avec @Pipe({ name: '...' }). La méthode transform() reçoit la valeur d'entrée (et d'éventuels arguments) et retourne la valeur transformée.

ng generate pipe resume

Exemple

// resume-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'resume',
})
export class ResumePipe implements PipeTransform {
  transform(texte: string, longueurMax: number = 20): string {
    if (texte.length <= longueurMax) {
      return texte;
    }
    return texte.slice(0, longueurMax) + '...';
  }
}

// article.ts
import { Component } from '@angular/core';
import { ResumePipe } from './resume-pipe';

@Component({
  selector: 'app-article',
  imports: [ResumePipe],
  template: `<p>{{ contenu | resume:30 }}</p>`,
})
export class Article {
  contenu = "Angular est un framework pour construire des applications web modernes et performantes.";
}

Exercice

Crée un pipe personnalisé initiales qui prend une chaîne de caractères (un nom complet, ex : "Fanny Saez") et retourne les initiales en majuscules (ex : "FS"). Utilise-le dans un composant qui affiche un avatar textuel.

Solution

// initiales-pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'initiales',
})
export class InitialesPipe implements PipeTransform {
  transform(nomComplet: string): string {
    return nomComplet
      .split(' ')
      .map(mot => mot.charAt(0).toUpperCase())
      .join('');
  }
}

// avatar.ts
import { Component } from '@angular/core';
import { InitialesPipe } from './initiales-pipe';

@Component({
  selector: 'app-avatar',
  imports: [InitialesPipe],
  template: `<div class="avatar">{{ nom | initiales }}</div>`,
})
export class Avatar {
  nom = 'Fanny Saez';
}

---

3. Prochaines étapes

Cette dernière section correspond à la conclusion du tutoriel officiel "Apprendre Angular" sur angular.dev. Elle marque la fin des 25 leçons couvertes dans ce wiki.

Ce que tu as appris

En parcourant les pages Installation, Composants, Routage, Formulaires, Services, Injection-de-dependances et Pipes, tu as vu :

• créer et structurer un projet Angular (composants standalone),
• gérer l'état réactif avec les signaux,
• utiliser la nouvelle syntaxe de flux de contrôle (@if, @for, @defer),
• communiquer entre composants avec input() / output(),
• optimiser les images avec NgOptimizedImage,
• naviguer entre plusieurs vues avec le routeur,
• construire des formulaires (template-driven et réactifs) avec validation,
• partager de la logique et de l'état avec des services et l'injection de dépendances,
• transformer l'affichage des données avec des pipes, intégrés et personnalisés.

Pour aller plus loin

• Signaux avancés : computed() (valeurs dérivées), effect() (effets de bord réactifs).
• HttpClient : consommer une API REST depuis un service Angular.
• Tests unitaires : ng test, Jasmine/Karma ou Vitest selon la configuration du projet.
• Angular Material ou PrimeNG : bibliothèques de composants UI prêts à l'emploi.
• Server-Side Rendering (SSR) et hydratation pour améliorer les performances et le SEO.
• Documentation officielle : angular.dev — guides détaillés, référence API complète, et tutoriels avancés.

Suggestion de projet pratique

Pour consolider ces notions, essaie de construire un petit projet combinant tout ce qui a été vu : par exemple une liste de tâches avec plusieurs pages (routage), un formulaire d'ajout (formulaire réactif + validation), un service partagé pour stocker les tâches (injection de dépendances), et un pipe personnalisé pour afficher joliment les dates d'échéance.

---