• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 16/04/2019

Modifiez les données en temps réel avec les Pipes

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les pipes (/pʌɪp/) prennent des données en input, les transforment, et puis affichent les données modifiées dans le DOM.  Il y a des pipes fournis avec Angular, et vous pouvez également créer vos propres pipes si vous en avez besoin.  Je vous propose de commencer avec les pipes fournis avec Angular.

Utilisez et paramétrez les Pipes

Un pipe que l'on utilise très souvent est DatePipe , qui analyse des objets JS de type Date et qui les affiche d'une manière plus lisible que leur encodage de base.  Par exemple, imaginez que vous vouliez ajouter la date de la dernière mise à jour dans votre application des appareils électriques.  Commencez par créer cet objet dans  AppComponent  et par l'afficher directement dans le template :

export class AppComponent {
  isAuth = false;
  lastUpdate = new Date();
<h2>Mes appareils</h2>
<p>Mis à jour : {{ lastUpdate }}</p>

L'objet Date a bien été créé, mais sous sa forme actuelle, il n'est pas très utile.  L'avantage d'un pipe est de pouvoir modifier l'affichage de cet objet sans en modifier la nature.  Ajoutons le DatePipe dans le template grâce au caractère  |  :

<p>Mis à jour : {{ lastUpdate | date }}</p>

La date s'affiche maintenant sous la forme "Oct 06, 2017" dans le DOM ; c'est déjà beaucoup plus lisible, mais on peut faire mieux.  Angular permet de paramétrer DatePipe en lui passant un argument de formatage, par exemple :

<p>Mis à jour : {{ lastUpdate | date: 'short' }}</p>

<p>Mis à jour : {{ lastUpdate | date: 'yMMMMEEEEd' }}</p>

Il y a beaucoup de possibilités de formatage de DatePipe : vous trouverez plus d'informations dans la documentation d'Angular.

Utilisez une chaîne de Pipes

Vous pouvez avoir besoin de plusieurs pipes pour un seul élément du DOM.  Imaginez, par exemple, que vous souhaitiez afficher la date de l'exemple précédent en majuscules.  Vous aurez simplement à faire comme cela :

<p>Mis à jour : {{ lastUpdate | date: 'yMMMMEEEEd' | uppercase }}</p>

async

Le pipe  async  est un cas particulier mais extrêmement utile dans les applications Web, car il permet de gérer des données asynchrones, par exemple des données que l'application doit récupérer sur un serveur.  Dans les chapitres suivants, vous apprendrez à communiquer avec un serveur extérieur, mais pour l'instant, vous allez simuler ce comportement en créant une Promise qui va se résoudre au bout de quelques secondes.  Modifiez  lastUpdate  comme suit :

lastUpdate = new Promise((resolve, reject) => {
    const date = new Date();
    setTimeout(
      () => {
        resolve(date);
      }, 2000
    );
  });

Si vous enregistrez le fichier, l'application vous créera une erreur :

Error: InvalidPipeArgument: '[object Promise]' for pipe 'DatePipe'.

En effet, au moment de générer le DOM,  lastUpdate  est encore une Promise et n'a pas de valeur modifiable par les pipes.

Il nous faut donc ajouter AsyncPipe en début de chaîne pour dire à Angular d'attendre l'arrivée des données avant d'exécuter les autres pipes :

<p>Mis à jour : {{ lastUpdate | async | date: 'yMMMMEEEEd' | uppercase }}</p>

Maintenant, quand votre page recharge, le champ "Mis à jour" est vide et puis, au bout de deux secondes, les données retournées par la Promise sont reçues, modifiées par les pipes suivants, et affichées.

Félicitations !  À ce stade, vous savez :

  • comment créer les composantes d'une application Angular : les components. Vous savez leur passer des données, réagir aux événements qu'ils déclenchent et même faire les deux en même temps !

  • utiliser des directives pour structurer votre application et en modifier le contenu de manière dynamique ;

  • profiter des pipes pour modifier l'affichage des données sans en changer la nature.

Avec ces éléments, vous avez déjà de quoi créer des applications basiques et fonctionnelles, mais Angular est extrêmement riche et permet d'intégrer facilement d'autres fonctionnalités : c'est précisément le sujet de la prochaine partie de ce cours.

Exemple de certificat de réussite
Exemple de certificat de réussite