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é.

Dans le TypeScript :

import {
  //...
  DatePipe,
} from '@angular/common';

@Component({
  selector: 'app-face-snap',
  standalone: true,
  imports: [
    // ...
    DatePipe
  ],
  templateUrl: './face-snap.component.html',
  styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent implements OnInit {
  // ...
}

et dans le HTML :

<p>FaceSnap créée le {{ faceSnap.createdAt | 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>FaceSnap créée le {{ faceSnap.createdAt | 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>FaceSnap créée le {{ faceSnap.createdAt | date: 'd MMMM yyyy, à HH:mm' }}</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 y a deux étapes.

D'abord, dans le fichier  main.ts  , enregistrez les données de locale  fr  :

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { registerLocaleData } from '@angular/common';
import * as fr from '@angular/common/locales/fr';

registerLocaleData(fr.default);

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Puis choisissez la locale fr dans  app.config.ts  :

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    { provide: LOCALE_ID, useValue: 'fr-FR' }
  ]
};

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 !