Generación de directivas y pipes en Angular

Esta lección le mostrará cómo crear una tubería personalizada. En este caso, una tubería que calcula y muestra el promedio de una matriz. Las tuberías se utilizan en plantillas angulares. para alterar los datos en un formato diferente antes de mostrarse al usuario. Angular proporciona un par de tuberías integradas diferentes para manejar el formato de datos para tipos populares como octavos, moneda o porcentajes, así como carcasa para cuerdas. A veces, es posible que deba crear una tubería personalizada para manejar el formateo de datos repetidos para sus casos de uso específicos. La CLI angular proporciona un esquema para crear estas tuberías personalizadas. Entonces, en una ventana de terminal en el directorio de la aplicación, puede ejecutar el comando: ng generate pipe, y luego el nombre de tu pipa. Entonces, esta tubería tomará una serie de números. y luego generar el promedio de esa matriz. Y este comando generará dos archivos diferentes: uno para la clase de tubería y luego otro es el archivo de prueba. También modifica el archivo app.module para declarar la tubería que acaba de generar por lo que se puede utilizar en la aplicación. Entonces, abriendo el archivo de clase de tubería que se generó, y eso estará debajo de la carpeta de la aplicación. Entonces, el archivo tiene este decorador de tuberías aquí, y luego el selector que se establece aquí en los metadatos así es como se llamará a esta tubería desde la plantilla. Entonces este método de transformación que se define aquí es el método que Angular va a llamar cuando encuentra esta tubería. El primer parámetro, valor, es lo que se pasa a la tubería. En este caso, será la matriz de números. Y aquí establezco ese tipo para el valor. También se pueden definir parámetros opcionales para configurar cómo transformar este valor. Entonces, para esta tubería, agregaré una variable llamada round, cuál será el número de lugares decimales para redondear el promedio a. Y estableceré el valor predeterminado para este parámetro opcional a dos. A continuación, agregaré el código a este método que calcula el promedio de la matriz. Así que aquí creé una variable para contener la suma de los elementos. e inicializó eso a cero. Y luego recorriendo cada elemento de la matriz, va a agregar el valor de ese elemento al total. Y luego al final divide ese total por la longitud de la matriz de valores. Y luego para completar esta función, solo devuelve ese redondeado promedio. Así que ahora, con la tubería personalizada completa, Abriré esa clase de componente de la aplicación principal y definir rápidamente una matriz de números aleatorios para usar. Y luego en la plantilla, Pasaré esa matriz a la tubería personalizada. Y cambiando al navegador, puede ver que el promedio calculado se muestra aquí, y se redondea a los dos decimales predeterminados ya que no pasé ese parámetro opcional. Ahora volviendo a la plantilla, Pasaré ese parámetro opcional y aquí lo pondré en cuatro. Y ahora volviendo al navegador, ese promedio ahora se muestra redondeado a cuatro lugares decimales en lugar de los dos predeterminados. Así que eso es todo para esta lección. sobre la creación de una tubería personalizada. Y en la próxima lección, aprenderá a crear una directiva de atributos personalizados.