Nous ne devons pas utiliser de méthodes dans le HTML à moins qu'elles ne soient associées à des événements :

Cela pose le problème d'être exécuté plusieurs fois. Dans l'exemple, un tableau est en cours de mappage et s'exécutera 16 fois. De même, nous ne devons pas utiliser directement les requêtes get ou API.

Ceci peut être résolu en utilisant un tube et/ou en créant un tube personnalisé, qui ne s'exécutera qu'une seule fois pour chaque utilisateur. Dans cet exemple, le tube possède une méthode de transformation qui reçoit les mêmes arguments que la méthode utilisée précédemment :

Explication:

Le problème avec les méthodes survient car elles ne sont pas natives d'Angular, donc Angular ne sait pas quand leur valeur a changé. En conséquence, il continue d’évaluer constamment les méthodes de modification après chaque petite mise à jour.

En revanche, un tube est natif, pur et ne s'exécute que lorsque ses arguments changent. De plus, un tube peut être réutilisé dans différentes parties de l'application (contrairement à une méthode, qui ne peut être réutilisée qu'en l'envoyant à un service).

Nous pouvons créer un canal s'il n'existe pas en précisant son emplacement cible :

ng g p pipes/fullName (où pipes/fullName est l'emplacement).

Le tube est créé en tant que classe qui implémente PipeTransform, une interface qui nécessite que nous disposions d'une méthode de transformation. Cette méthode est exécutée lorsque le tuyau s'exécute et fonctionne comme une méthode normale. Pour utiliser le tube créé, nous devons l'importer dans le composant de l'application (autonome) :

Lors de son utilisation dans le HTML, nous l'appelons par le nom indiqué dans le champ de nom du tube, en utilisant le symbole '|' suivi du nom du tube. Le premier argument est passé à gauche, et si on veut passer d'autres arguments, ils sont passés à droite, après deux points ':':

Rappelez-vous les bonnes pratiques : s'il y a beaucoup d'arguments, il est préférable d'utiliser un objet. Comme bonne pratique, essayez de ne pas abuser des tuyaux pour éviter de les encombrer. Décomposez le code et vous réussirez.

Pour créer le contenu du tube, nous spécifions les arguments que nous voulons recevoir et le type de retour dans la méthode de transformation. Ensuite, nous écrivons le contenu et renvoyons le résultat. Les valeurs facultatives peuvent être reçues en les préfixant d'un « ? », et les valeurs par défaut peuvent être attribuées en utilisant « = ».

— Notes basées sur le cours Angular d'EfisioDev —