Angular

Appearance

Comment utiliser le pipe date sur Angular ? ​

Pensez à importer CommonModule ​

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante à la liste des imports de votre module :

ts
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Ensuite, vous pouvez utiliser la fonction pipe avec le filtre date dans l'un de vos templates Angular pour formater une date ou une heure selon un format spécifique. Par exemple :

html
<p>La date actuelle est : {{ currentDate | date:'fullDate' }}</p>
<p>La date actuelle est : {{ currentDate | date:'fullDate' }}</p>

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 } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  currentDate: Date = new Date();

  constructor(private datePipe: DatePipe) { }

  formatDate() {
    return this.datePipe.transform(this.currentDate, 'fullDate');
  }
}
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html'
})
export class MyComponent {
  currentDate: Date = new Date();

  constructor(private datePipe: DatePipe) { }

  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. Vous pouvez ensuite utiliser cette méthode dans le template du composant pour afficher la date formatée :

html
<p>La date actuelle est : {{ formatDate() }}</p>
<p>La date actuelle est : {{ formatDate() }}</p>