Angular Academy · Leçon

Chaînage et paramétrage des pipes

Combinez des pipes et transmettez des arguments.

Chaînage et paramétrage des pipes est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Passer des arguments aux pipes

Les pipes peuvent accepter des arguments après deux-points. La forme est {{ value | pipeName:arg1:arg2 }}. Chaque argument est séparé par son propre deux-points.

Un seul argument

De nombreux pipes prennent un argument. Par exemple, le pipe date prend une chaîne de format.

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

Plusieurs arguments

Le pipe slice prend un index de début et un index de fin, chacun étant transmis avec son propre deux-points.

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

Arguments dynamiques

Les arguments peuvent être des propriétés du composant, et pas seulement des littéraux. Cela vous permet de modifier le comportement du pipe de manière réactive.

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

Qu'est-ce que l'enchaînement de pipes ?

Vous pouvez enchaîner des pipes afin que la sortie de l'un devienne l'entrée du suivant. Ils s'exécutent de gauche à droite.

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

Exemple d'enchaînement

Ici, une date est mise en forme, puis convertie en majuscules. Le pipe date s'exécute en premier, puis uppercase.

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

L'ordre est important

L'ordre des pipes enchaînés modifie le résultat. Appliquer uppercase avant slice ou après produit ici le même texte, mais l'ordre peut avoir beaucoup d'importance avec des pipes de transformation.

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

Combiner arguments et enchaînement

Vous pouvez combiner librement arguments et enchaînement. Chaque pipe reçoit toujours comme valeur la sortie du pipe précédent.

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

Enchaîner avec une devise

Mettez un nombre en forme comme une valeur monétaire, puis supprimez les espaces superflus. Bien que peu courant, cet exemple montre que les pipes sont des briques composables.

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

Conseils de lisibilité

Les longues chaînes de pipes peuvent nuire à la lisibilité. Si une chaîne devient complexe, envisagez de calculer la valeur dans le composant ou d'utiliser plutôt un pipe personnalisé.

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

Espaces autour des pipes

Les espaces autour de | et de : sont facultatifs, mais recommandés pour améliorer la lisibilité. Angular ignore les espaces superflus.

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

Vérification rapide

Vérifiez votre compréhension des arguments et de l'enchaînement des pipes.

Récapitulatif

Vous avez appris à transmettre un ou plusieurs arguments avec des deux-points, à utiliser des arguments dynamiques issus des propriétés du composant et à enchaîner des pipes pour faire circuler la sortie de gauche à droite.

Vous allez maintenant créer votre propre pipe personnalisé.

Questions Fréquemment Posées

La leçon « Chaînage et paramétrage des pipes » est-elle gratuite ?

Oui — le texte complet de « Chaînage et paramétrage des pipes » 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 « Chaînage et paramétrage des pipes » ?

Combinez des pipes et transmettez des arguments. 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 2 sur 4.

Combien de temps prend la leçon « Chaînage et paramétrage des pipes » ?

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