Comment créer un pipe qui transforme une date en mois en français avec Angular

Dans notre application de réservation des créneaux pour formateur et formatrice, nous avons besoin d’afficher les dates sur plusieurs formats. Nous avons alors utilisé les pipes d’Angular, et nous avons commencé à utiliser la globalisation.

Paramétrage de la globalisation pour la date en français

Dans app.module, vous devez ajouter une référence à la localisation que vous souhaitez utiliser. Ici, nous utilisons le français.

Création du pipe d’Angular et utilisation de formatDate

Créez maintenant un pipe dédié (ici nous l’avons appelé : monthAsLabel). Et dans la méthode de transformation, vous allez utiliser le formatDate d’Angular.

En lui précisant la localisation (et avec le paramétrage fait dans app.module), nous allons avoir un mois affiché en texte complet (janvier, février, …)

Utilisation de notre pipe dans notre Template

Il nous suffit alors de l’appeler, dans notre vue, ainsi :

Une autre possibilité : le pipe date d’Angular

Si vous ne voulez pas créer un pipe dédié, vous pouviez utiliser aussi le pipe dédié d’Angular : date.

Parmi les options, vous pouvez passer la localisation. L’astuce ici, c’est d’appeler le timezone à vide, pour accéder à la localisation