No debemos usar métodos en HTML a menos que estén asociados con eventos:

Esto tiene el problema de ejecutarse varias veces. En el ejemplo, se está asignando una matriz que se ejecutará 16 veces. De manera similar, no debemos utilizar solicitudes get o API directamente.

Esto se puede resolver usando una tubería y/o creando una tubería personalizada, que solo se ejecutará una vez para cada usuario. En este ejemplo, la tubería tiene un método de transformación que recibe los mismos argumentos que el método utilizado anteriormente:

Explicación:

El problema con los métodos surge porque no son nativos de Angular, por lo que Angular no sabe cuándo ha cambiado su valor. Como resultado, sigue evaluando constantemente métodos para detectar cambios después de cada pequeña actualización.

Por el contrario, una tubería es nativa, pura y solo se ejecuta cuando cambian sus argumentos. Además, una tubería se puede reutilizar en diferentes partes de la aplicación (a diferencia de un método, que solo se puede reutilizar enviándolo a un servicio).

Podemos crear una tubería si no existe especificando su ubicación de destino:

ng g p pipes/fullName (donde pipes/fullName es la ubicación).

La tubería se crea como una clase que implementa PipeTransform, una interfaz que requiere que tengamos un método de transformación. Este método se ejecuta cuando la tubería se ejecuta y funciona como un método normal. Para usar la tubería creada, debemos importarla al componente de la aplicación (independiente):

Cuando lo usamos en HTML, lo llamamos por el nombre indicado en el campo de nombre de la tubería, usando el símbolo '|' seguido del nombre de la tubería. El primer argumento se pasa a la izquierda, y si queremos pasar otros argumentos, se pasan a la derecha, después de dos puntos ':':

Recuerda las buenas prácticas: si hay muchos argumentos, es mejor usar un objeto. Como buena práctica, trate de no abusar de las tuberías para evitar el desorden. Desglosa el código y tendrás éxito.

Para crear el contenido de la canalización, especificamos los argumentos que queremos recibir y el tipo de retorno en el método de transformación. Luego, escribimos el contenido y devolvemos el resultado. Se pueden recibir valores opcionales anteponiendo "?", y los valores predeterminados se pueden asignar usando "=".

— Notas basadas en el curso Angular de EfisioDev —