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>
![La date est formatée avec un format par défaut](https://user.oc-static.com/upload/2024/03/19/17108582974012_Screenshot%202024-03-19%20at%2015.24.46.png)
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>
![Le format 'longDate' donne le nom du mois au complet, le jour du mois, puis l'année](https://user.oc-static.com/upload/2024/03/19/17108583267918_Screenshot%202024-03-19%20at%2015.25.17.png)
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>
![Date personnalisée](https://user.oc-static.com/upload/2024/03/19/17108583892668_Screenshot%202024-03-19%20at%2015.25.45.png)
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' }
]
};
![Le nom du mois apparaît en français](https://user.oc-static.com/upload/2024/03/19/17108607497688_Screenshot%202024-03-19%20at%2016.05.38.png)
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
oumediumTime
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 !