Angular Academy · Leçon

Créer des pipes personnalisés

Créez des pipes de transformation réutilisables.

Créer des pipes personnalisés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Pourquoi créer des pipes personnalisés ?

Lorsque les pipes intégrés ne suffisent pas, vous pouvez créer un pipe personnalisé pour encapsuler une logique de transformation réutilisable dans vos modèles.

Le décorateur @Pipe

Un pipe est une classe décorée avec @Pipe. La propriété name est celle que vous utilisez dans les modèles.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

Implémenter PipeTransform

Une classe de pipe implémente l'interface PipeTransform, qui exige une seule méthode transform.

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

La méthode transform

Le premier paramètre de transform est la valeur traitée par le pipe. Tout ce que vous renvoyez devient la sortie affichée.

transform(value: string): string {
  return value.trim();
}

Utiliser votre pipe

Importez le pipe dans un composant autonome, puis utilisez son nom dans le modèle comme vous le feriez avec un pipe intégré.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Accepter des arguments

Les paramètres supplémentaires après value deviennent des arguments du pipe. Les appelants les transmettent avec des deux-points.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Valeurs d'argument par défaut

Attribuez des valeurs par défaut aux arguments afin que les appelants puissent les omettre. Votre pipe reste ainsi flexible.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Gérer les valeurs null et undefined

Prévoyez toujours le cas où l'entrée est absente. Renvoyez une valeur de repli appropriée lorsque la valeur est null ou undefined.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Exemple de pipe de troncature

Voici un pipe pratique qui raccourcit les textes longs et ajoute une ellipse.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Définir le type de retour

Annotez le type de retour afin que TypeScript et vos modèles restent sûrs du point de vue des types. Un pipe peut renvoyer n'importe quel type, pas uniquement des chaînes.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Enregistrer dans un module (NgModule)

Si vous utilisez des NgModules plutôt que des composants autonomes, déclarez le pipe dans declarations et exportez-le si nécessaire.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Vérification rapide

Vérifiez votre compréhension des pipes personnalisés.

Récapitulatif

Vous avez créé un pipe personnalisé avec @Pipe et PipeTransform, accepté des arguments avec des valeurs par défaut, géré le cas null et enregistré le pipe dans des composants autonomes ou des NgModules.

Vous allez maintenant découvrir les pipes purs et impurs.

Questions Fréquemment Posées

La leçon « Créer des pipes personnalisés » est-elle gratuite ?

Oui — le texte complet de « Créer des pipes personnalisés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer des pipes personnalisés » ?

Créez des pipes de transformation réutilisables. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Créer des pipes personnalisés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy