Angular Academy · Leçon

Utiliser les pipes intégrés

Formatez les dates, les nombres et le texte avec des pipes.

Utiliser les pipes intégrés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Qu’est-ce qu’un tube ?

Un tube transforme directement les données dans votre modèle pour les afficher. Vous écrivez une valeur, le caractère de tube |, puis le nom du tube.

Les tubes sont parfaits pour mettre en forme les dates, les nombres, les devises et le texte sans écrire de logique supplémentaire dans le composant.

La syntaxe des tubes

La forme de base est {{ value | pipeName }}. Angular transmet la valeur au tube et affiche le résultat transformé.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Les tubes uppercase et lowercase

uppercase et lowercase modifient la casse d’une chaîne. Ils sont simples et couramment utilisés pour les libellés et les titres.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

Le tube date

Le tube date met en forme un objet Date ou un horodatage en une chaîne lisible. Par défaut, il utilise un format de date moyen.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Mettre les dates en forme

Vous pouvez transmettre une chaîne de format au tube date, comme "shortDate", "fullDate" ou un modèle personnalisé tel que "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

Le tube currency

Le tube currency met un nombre en forme monétaire. Par défaut, il utilise USD, mais vous pouvez transmettre un code monétaire.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Les tubes number et percent

Le tube number met les nombres en forme avec des options de chiffres, tandis que percent affiche une valeur sous forme de pourcentage.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

Comprendre digitsInfo

Le tube number accepte une chaîne digitsInfo : minIntegerDigits.minFractionDigits-maxFractionDigits. Par exemple, "1.2-2" affiche toujours exactement deux décimales.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

Le tube json

Le tube json sérialise n’importe quel objet en chaîne JSON. Il sert principalement à déboguer les modèles afin de voir la structure de vos données.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

Le tube slice

Le tube slice renvoie un sous-ensemble d’un tableau ou d’une chaîne, comme slice en JavaScript. Il est utile pour tronquer des listes.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Importer des tubes dans des composants autonomes

Dans les composants autonomes, vous devez importer les tubes utilisés, par exemple DatePipe ou CurrencyPipe, depuis @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Vérification rapide

Testez votre compréhension des tubes intégrés.

Récapitulatif

Vous avez découvert les principaux tubes intégrés : uppercase, lowercase, date, currency, number, percent, json et slice.

Les tubes gardent la mise en forme dans le modèle, de manière claire et déclarative. Ensuite, vous allez enchaîner des tubes et leur transmettre des arguments.

Questions Fréquemment Posées

La leçon « Utiliser les pipes intégrés » est-elle gratuite ?

Oui — le texte complet de « Utiliser les pipes intégré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 « Utiliser les pipes intégrés » ?

Formatez les dates, les nombres et le texte avec des pipes. 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 1 sur 4.

Combien de temps prend la leçon « Utiliser les pipes intégré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