Qu'est-ce qu'un pipe ?

• Pure function qui transforme une donnée

// Utilisation dans un template
<p>Creation date : {{ create_at | date }}</p>

// Paramètre de pipe
<p>Creation date : {{ create_at | date:'MM/DD/AAAA' }}</p>

// pipes chainés
<p>Creation date : {{ create_at | date | uppercase }}</p>

Les pipes natifs

// DatePipe
<p>Creation date : {{ create_at | date }}</p>

// UpperCasePipe
<p>Creation date : {{ username | uppercase }}</p>

// LowerCasePipe
<p>Creation date : {{ username | lowercase }}</p>

// CurrencyPipe
<p>Creation date : {{ price | currency }}</p>

// PercentPipe
<p>Creation date : {{ price | percent }}</p>

// JsonPipe
<p>Creation date : {{myObject | json }}</p>

• Liste des pipes natifs
  https://angular.io/docs/ts/latest/api/#!?apiFilter=pipe

Les pipes personnalisés

import { Pipe, PipeTransform } from '@angular/core'

export class ReversePipe implements PipeTransform {
  transform(value:string, args:string[]) : any {
    return value.reverse()
  }
}

• Importer le décorateurr Pipe et PipeTransform depuis le module @angular/core
• Créer une classe qui implémente PipeTransform et qui définit une méthode transform

Le pipe asynchrone

// Component
asyncAttribute<string> = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise resolved'), 500);
})

// Template
<p>Async result: {{ asyncAttribute | async }}

• Permet de résoudre les données asynchrone depuis le template (Observable ou Promise)

• Utiliser un ou plusieurs pipe natifs dans l'application
• Créer un pipe personnalisé qui filtre un tableau de string avec une lettre particulière
• Créer une méthode asynchrone (HTTP?) puis utiliser le pipe async pour afficher le résultat sans utiliser un .then ou un .subscribe