Appearance
Comment utiliser le pipe date sur Angular ?
Voici un format de date par défaut : fullDate
qui affiche la date complète. Vous pouvez également utiliser d'autres formats de date prédéfinis ou définir votre propre format.
ts
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [DatePipe],
template: `<p>La date actuelle est : {{ currentDate | date:'fullDate' }}</p>`
})
export class MyComponent {
currentDate: Date = new Date();
}
Dans cet exemple, la variable currentDate
contient une date et l'opérateur |
permet de filtrer cette date en utilisant le filtre date
avec le format fullDate
pour afficher la date complète.
Utiliser le service DatePipe
Vous pouvez également utiliser la fonction pipe
avec le filtre date
dans un composant Angular pour formater une date avant de l'afficher dans le template. Par exemple :
ts
import { Component, inject } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-my-component',
standalone: true,
imports: [DatePipe],
template: `<p>La date actuelle est : {{ formatDate() }}</p>`
})
export class MyComponent {
private datePipe = inject(DatePipe);
currentDate: Date = new Date();
formatDate() {
return this.datePipe.transform(this.currentDate, 'fullDate');
}
}
Dans ce composant, la méthode formatDate
utilise l'objet DatePipe
pour formater la date stockée dans la variable currentDate
en utilisant le format fullDate
, puis retourne le résultat.