Angular
Templating

Les Pipes (|)

Les Pipes (tuyaux) servent à transformer visuellement une donnée dans le HTML sans modifier la vraie variable en TypeScript. On utilise le symbole de la barre verticale | (Alt Gr + 6).

Date Pipe

Formate une date illisible en format humain.

Brut : Fri Oct 23 2026 20:14:08 GMT+0000 (temps universel coordonné)
| date:'shortDate'
10/23/26
Uppercase

Transforme le texte en MAJUSCULES.

Brut : Angular Pipes Exemple
| uppercase
ANGULAR PIPES EXEMPLE
Currency Pipe

Formate un nombre en devise (ex: EUR).

Brut : 12345.678
| currency:'EUR'
€12,345.68
Percent Pipe

Multiplie par 100 et ajoute le symbole %.

Brut : 0.678
| percent
68%
{ }
JSON Pipe

Affiche visuellement un Objet. Idéal pour débugger.

| json
{ "name": "John Doe", "age": 30, "email": "john.doe@example.com" }
Pipe Personnalisé

Vous pouvez créer vos propres pipes (ex: Inverser).

Brut : "Angular Pipes"
| reverse
Pipes Angular

Le Code Source

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Requis pour les pipes de base
import { ReversePipe } from './reverse.pipe'; // Notre pipe personnalisé

@Component({
  selector: 'app-root',
  imports: [CommonModule, ReversePipe],
  template: `
    <p>Date : {{ currentDate | date:'shortDate' }}</p>
    <p>Argent : {{ amount | currency:'EUR' }}</p>
    <p>Perso : {{ "Angular Pipes" | reverse }}</p>
  `
})
export class AppComponent {
  currentDate = new Date();
  amount = 12345.678;
}
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse',
  standalone: true
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    // Inverse les mots de la phrase
    return value.split(' ').reverse().join(' ');
  }
}