Date manipulation avec DayJS – Ionic / Angular

Dans cet article consacré à Ionic et Angular, je te montre comment mettre en place un « custom pipe » pour afficher le temps passé depuis une date précise sous la forme « il y a 2 jours ». Cette fonctionnalité est très répandue dans les applications sociales qui présentent un feed de contenu daté par la publication d’un utilisateur. Nous allons voir ensemble quelles sont les options possibles et comment mettre en place une solution pour manipuler les dates de manière autonome et réutilisable dans un autre projet.

Tout le monde a déjà vu ce genre de micro fonctionnalité, que ce soit en se promenant sur Facebook ou sur Instagram, tous les réseaux sociaux utilise cela pour afficher le moment de la publication. Cela est beaucoup plus agréable à lire pour l’utilisateur et permet de mieux se représenter le temps écoulé depuis ladite publication.

Les Pipes Angular

Avec le framework Angular, il est très facile de mettre en place une logique réutilisable pour manipuler le format Date et afficher un joli texte à la place.

Angular met à disposition une fonctionnalité qui permet d’effectuer des manipulations sur les données. Celle-ci s’appelle les Pipe.

Les Pipe Angular sont très utile et spécialement conçu pour effectuer ce genre de tâche. Nous allons donc regarder ensemble comment créer un custom Pipe qui nous affichera la date au format « formNow » (depuis maintenant).

Créer un Custom Pipe Angular

Il est très facile de générer un pipe dans un projet Angular, il suffit pour cela d’utiliser le CLI. Avec une simple commande, Angular CLI va automatiquement générer un fichier Pipe et l’ajouter au module correspondant. La commande à utiliser pour lancer cette opération est:

$ ng g p MonCustomPipe

Cela va générer un fichier Pipe avec le fichier Spec et ajouter ce pipe au Module parent le plus proche (‘app.module.ts’ dans ce cas).

Nous allons donc pour commencer, créer un Pipe que l’on va ensuite implémenter avec une librairie de manipulation de Date qui s’appelle DayJS.

Voici la commande à utiliser:

$ ng g p DayJS

Cela va générer un fichier day-js.pipe.ts et ajouter l’import de ce pipe dans le fichier app.module.ts. Ensuite, nous allons implémenter la librairie DayJS.

DayJS pour manipuler les Dates

DayJS est une super librairie très légère (2ko) qui permet de manipuler les dates comme avec Moment.js. L’avantage par rapport à Moment.js, c’est le poids de la librairie, seulement 2Ko. Et ensuite, DayJS est conçu de manière modulaire avec la gestion de module de ES6 et embarque en plus le concept d’immutabilité que Moment.js ne possède pas. Pour ces raison, je vais préférer utiliser DayJS pour concevoir ce pipe.

Pour installer DayJS, il faut lancer une petite commande pour télécharger le package NPM et le lier à notre projet Angular.

$ npm i dayjs --sav

Cela va télécharger le package et installer le module dans le dossier node_modules du projet. Ainsi on pourra l’utiliser dans le pipe que l’on à créer juste avant.

Implémenter DayJS dans un Pipe Angular

Là aussi, rien de bien compliqué. Si je me réfère à la doc, je n’ai qu’à ajouter les lignes d’import à mon fichier Pipe pour que je puisse utiliser DayJS.

On vais donc ajouter les imports dans l’entête du fichier day-js.pipe.ts pour pouvoir utiliser la librairie dans notre pipe.

Maintenant que l’on à ajouter la librairie, on peut implémenter le plugin RelativeTime de DayJS qui permet d’ajouter la fonctionnalité de calcul que l’on souhaite utiliser. Pour cela, on va modifier l’entête de notre fichier pour ajouter l’import avec le plugin RelativeTime.

Voilà qui est fait. Il ne reste plus qu’a retourner la value modifiée par la librairie à la place du return null de notre pipe.

Je propose de profiter pour implémenter la méthode formNow et toNow qui proviennent du même plugin. Pour ce faire, je vais ajouter un paramètre dans la méthode transform() pour lui spécifier quelle opération je veux faire. Je profite pour ajouter aussi l’option withoutSuffix que je definit par défaut à false.

Voilà. Il ne reste plus qu’a utiliser ce pipe dans un fichier de template. Voici un exemple simple:

Bonus: Internationalisation i18n

Je ne voulais pas te laisser comme cela avec une solution incomplète. En effet, le plugin RelativeTIme de DayJS est par default en anglais. Tu peux ajouter facilement une fonctionnalité d’internationalisation de la librairie en ajoutant le module optionnel i18n. C’est affligent de faciliter!

Il faut simplement ajouter une ligne d’import dans ton pipe pour modifier globalement la langue de la librairie.

On peut aussi configurer à la demande la langue en ajoutant la méthode local() juste avant les méthodes de manipulation de donnée. Par exemple:

En vidéo

J’ai implémenté dans un projet Ionic Angular cette solution et je montre dans une vidéo que j’ai poster sur youtube à quel point c’est facile à faire. Tu pourra ainsi probablement mieux suivre les étapes qui permettent d’implémenter facilement cette logique de manipulation de donnée avec un pipe Angular.

Lien de la vidéo: https://www.youtube.com/watch?v=AHwnk3Al2sY

Conclusion

Pas bien compliqué tout cela. Il faudra moins de 10 minutes pour implémenter cette solution qui permet de décentraliser la logique de manipulation de données dans un fichier dédié.

Ce fichier est complètement autonome et peut fonctionner dans n’import quel autre projet Angular. Il te suffis pour cela de copier le fichier pipe et de l’ajouter au module d’un autre projet pour que cela fonctionne.

L’autre avantage d’utiliser un Pipe Angular, c’est que cela améliore la performance de l’application. Car les pipes ont une spécificité que l’on ne retrouverait pas autrement. C’est le concept de « pure » / « impure ».

Les pipes sont par défaut « pure » et donc minimisent le déclenchement de la méthode ChangeDetection() de Angular, ce qui va améliorer le rendu et les interactions avec l’interface utilisateur.

Tu as aimé cet article et tu veux en apprendre plus sur framework Angular? Tu peux consulter les autres articles qui traitent du même sujet sur mon blog, dans la catégorie Angular, mais je te propose aussi de jeter un oeil sur la formation Angular Entreprise que je propose.

On y abord le framework en profondeur. Cette formation est extrêmement complète et technique, ce qui te donnera un avantage concurrentiel indéniable par rapport à l’autre développeur Angular.
➡️ Formation Angular Entreprise

Comme d’habitude, je te laisse aussi un exemple de projet Ionic Angular qui utilise ce custom Pipe DayJS pour manipuler la date. Tu le retrouveras sur mon Github sous le lien suivant: Ionic Angular Custom Pipe DayJS.

J’en profite pour te présenter un nouveau projet que je partage. C’est l’utilitaire @ngnz. Avec @ngnz tu peux profiter de plusieurs utilitaires pour tes projets Angular, React ou Javascript. Tu y retrouvera le Pipe DayJS dans un module Angular, ainsi que la version ES6 function utilisable dans un projet React ou Javascript.

Tu peux aussi t’inscrire sur mon channel Slack pour y poser tes questions et discuter avec d’autres développeurs: Invitation à rejoindre mon Channel Slack (cette invitation expire le 1 mars 2021).

Et n’hésite pas à me laisser tes commentaires et remarque juste en dessous. C’est pour cela que j’ai activé la fonctionnalité dans mon wordpress 😉

Demande ta version numérique gratuite de mon livre Javascript Array Methods

Ne rate plus jamais un article!

Inscrit toi pour recevoir une notification par email lors de la publication d'un nouvel article.

Non, je ne veux pas m'inscrire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *