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.

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 :

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.