Débutez avec Angular

Dans votre application, vous affichez la date de création de chaque FaceSnap, mais le formatage affiché n'est vraiment pas top. Vous allez maintenant personnaliser ce formatage pour améliorer l'expérience de vos utilisateurs avec DatePipe.

Personnalisez le format des dates

Il est tout à fait possible d'utiliser DatePipe comme vous avez utilisé UpperCasePipe précédemment, et un formatage par défaut sera appliqué :

<p>Mis en ligne le {{ faceSnap.createdDate | date }}</p>

C'est mieux, mais c'est pas encore ça.

Pour configurer un pipe, on ajoute deux-points  :  puis généralement une chaîne de caractères qui définit la configuration. Angular nous propose quelques configurations prédéfinies pour DatePipe, comme par exemple  longDate  :

<p>Mis en ligne le {{ faceSnap.createdDate | date: 'longDate' }}</p>

Vous avez également la possibilité de créer vos propres configurations en passant une chaîne de caractères qui encode votre configuration souhaitée. Voici deux exemples :

<p>Mis en ligne le {{ faceSnap.createdDate | date: 'dd/MM/yy, à HH:mm' }}</p>

<p>Mis en ligne {{ faceSnap.createdDate | date: 'à HH:mm, le d MMMM yyyy' }}</p>

Vous aurez certainement remarqué que les dates apparaissent en anglais. En effet, la locale par défaut des applications Angular est en-US. Si vous le souhaitez, il est possible de changer la locale par défaut de votre application, ce qui change également le résultat des pipes.

Changez la locale par défaut

Pour changer la locale de votre application en français, il faudra ajouter quelques lignes dans votre fichier  app.module.ts  :

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FaceSnapComponent } from './face-snap/face-snap.component';
import { registerLocaleData } from '@angular/common';
import * as fr from '@angular/common/locales/fr';

@NgModule({
  declarations: [
    AppComponent,
    FaceSnapComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR'}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    registerLocaleData(fr.default);
  }
}

Une fois la locale changé, vous verrez tout de suite la différence au niveau des dates. Le dernier format ci-dessus, par exemple, donne maintenant :

En résumé

• DatePipe permet de formater les dates, et sans configuration fournit un formatage par défaut.

• DatePipe fournit des configurations prédéfinies avec des noms comme  short,  longDate  ou  mediumTime

• DatePipe permet également de personnaliser totalement le format d'affichage des dates avec des chaînes de caractères qui encodent le format souhaité, par exemple  'à HH:mm, le d MMMM yyyy'

 Continuons dans la découverte des pipes avec un pipe qui vous permettra de formater les chiffres – rendez-vous au prochain chapitre !