ngx-transforms<\/a>: una colecci\u00f3n de pipes de Angular listos para importar y usar en tu template, sin escribir una l\u00ednea de l\u00f3gica extra.<\/p>\n\n\n\n\u00bfQu\u00e9 es ngx-transforms?<\/h2>\n\n\n\n
ngx-transforms es una librer\u00eda de pipes para Angular que re\u00fane las transformaciones m\u00e1s comunes que cualquier desarrollador necesita en el d\u00eda a d\u00eda. La idea es simple: en lugar de implementar la misma l\u00f3gica una y otra vez en cada proyecto, la instal\u00e1s una sola vez y la ten\u00e9s disponible en todos tus componentes.<\/p>\n\n\n\n
npm install ngx-transforms --save<\/code><\/pre>\n\n\n\nUna vez instalada, pod\u00e9s importar los pipes directamente en tus componentes standalone o en tu m\u00f3dulo, y usarlos directamente en el template.<\/p>\n\n\n\n
El dolor que resuelve: el ciclo del pipe custom<\/h2>\n\n\n\n
Todo Angular developer ha vivido esta secuencia al menos una vez (o veinte):<\/p>\n\n\n\n
\n- Necesit\u00e1s mostrar \u00abhace 5 minutos\u00bb en lugar de un timestamp<\/li>\n
- Angular no tiene ese pipe built-in<\/li>\n
- Cre\u00e1s
time-ago.pipe.ts<\/code> con tu propia implementaci\u00f3n<\/li>\n- Dos proyectos despu\u00e9s, hac\u00e9s copy-paste de ese mismo archivo<\/li>\n
- En el tercer proyecto, el copy-paste tiene un bug que ya hab\u00edas corregido en el original<\/li>\n<\/ol>\n\n\n\n
Con una librer\u00eda de pipes como ngx-transforms, este ciclo desaparece. La l\u00f3gica est\u00e1 testeada, mantenida y disponible con un simple import.<\/p>\n\n\n\n
Pipes de texto: los que m\u00e1s vas a usar<\/h2>\n\n\n\n
La manipulaci\u00f3n de strings es una de las tareas m\u00e1s frecuentes en cualquier UI. Algunos pipes que te cambian la vida:<\/p>\n\n\n\n
<!-- Truncar texto largo con elipsis -->\n{{ descripcion | truncate:100 }}\n{{ descripcion | truncate:100:'...' }}\n\n<!-- Primera letra en may\u00fascula (no toda la palabra) -->\n{{ 'hola mundo' | ucFirst }}\n<!-- Output: \"Hola mundo\" -->\n\n<!-- Slugify para URLs amigables -->\n{{ 'Mi Art\u00edculo de Blog' | slugify }}\n<!-- Output: \"mi-articulo-de-blog\" -->\n\n<!-- Camelcase -->\n{{ 'nombre_de_variable' | camelize }}\n<!-- Output: \"nombreDeVariable\" -->\n\n<!-- Repetir texto -->\n{{ '⭐' | repeat:5 }}\n<!-- Output: \"⭐⭐⭐⭐⭐\" -->\n\n<!-- Limpiar HTML tags de un string -->\n{{ contenidoHTML | stripTags }}\n\n<!-- Pluralizar autom\u00e1ticamente -->\n{{ cantidad }} {{ 'comentario' | makePluralString:cantidad }}<\/code><\/pre>\n\n\n\nTodos estos casos surgen constantemente en el desarrollo de interfaces: cards con texto limitado, badges, slugs para rutas, labels din\u00e1micos. Tenerlos como pipe evita l\u00f3gica en el componente y mantiene el template limpio y declarativo.<\/p>\n\n\n\n
Pipes de fechas: adi\u00f3s al boilerplate de Moment.js<\/h2>\n\n\n\n
El pipe m\u00e1s pedido que Angular no trae de f\u00e1brica: fechas relativas.<\/p>\n\n\n\n
<!-- Fechas relativas (timeAgo) -->\n{{ post.createdAt | timeAgo }}\n<!-- Output: \"hace 3 minutos\", \"ayer\", \"la semana pasada\" -->\n\n<!-- Comparado con el enfoque manual sin pipe -->\n<span>{{ getTimeAgo(post.createdAt) }}<\/span>\n<!-- ☝️ Requiere l\u00f3gica en el componente, no es reactive, es m\u00e1s dif\u00edcil de testear --><\/code><\/pre>\n\n\n\nEl pipe timeAgo<\/code> es una alternativa liviana a Moment.js o date-fns para este caso de uso puntual. Se integra perfectamente con el sistema de Change Detection de Angular y no requiere importar una librer\u00eda de fechas completa.<\/p>\n\n\n\nPipes de arrays: filtrar, ordenar y agrupar en el template<\/h2>\n\n\n\n
Uno de los casos de uso m\u00e1s poderosos: manipular colecciones directamente en el template sin procesar datos en el componente.<\/p>\n\n\n\n
<!-- Filtrar array de objetos -->\n@for (user of usuarios | filterBy:['activo']:true; track user.id) {\n <app-user-card [user]=\"user\" \/>\n}\n\n<!-- Ordenar por propiedad -->\n@for (producto of productos | orderBy:'precio'; track producto.id) {\n <app-producto [data]=\"producto\" \/>\n}\n\n<!-- Ordenar descendente -->\n@for (nota of notas | orderBy:'-fecha'; track nota.id) {\n <app-nota [nota]=\"nota\" \/>\n}\n\n<!-- Agrupar por categor\u00eda -->\n@for (grupo of productos | groupBy:'categoria' | keyvalue; track grupo.key) {\n <h3>{{ grupo.key }}<\/h3>\n @for (item of grupo.value; track item.id) {\n <app-producto [data]=\"item\" \/>\n }\n}\n\n<!-- Valores \u00fanicos -->\n{{ tags | unique | json }}\n\n<!-- Aplanar array anidado -->\n{{ matrizDeNumeros | flatten }}<\/code><\/pre>\n\n\n\nNota sobre performance:<\/strong> Los pipes de array (filterBy, orderBy) suelen ser impure<\/em> por necesidad, lo que significa que Angular los re-eval\u00faa en cada ciclo de detecci\u00f3n de cambios. Para listas grandes, consider\u00e1 cachear el resultado en el componente con computed()<\/code> si us\u00e1s Signals, o con una propiedad derivada.<\/p>\n\n\n\nPipes matem\u00e1ticos: c\u00e1lculos sin tocar el componente<\/h2>\n\n\n\n
Peque\u00f1os c\u00e1lculos que terminan siendo m\u00e9todos en el componente cuando deber\u00edan ser pipes:<\/p>\n\n\n\n
<!-- Suma de un array -->\nTotal: {{ precios | sum | currency:'ARS' }}\n\n<!-- Promedio -->\nPromedio: {{ calificaciones | average }}\n\n<!-- M\u00e1ximo y m\u00ednimo -->\nMayor: {{ valores | max }}\nMenor: {{ valores | min }}\n\n<!-- Porcentaje -->\n{{ completados | percentage:total }}%\n\n<!-- Formatear bytes a KB\/MB\/GB legible -->\n{{ archivo.size | bytes }}\n<!-- Output: \"2.4 MB\" en lugar de \"2516582\" -->\n\n<!-- Redondear -->\n{{ precio | round:2 }}\n{{ temperatura | ceil }}\n{{ descuento | floor }}<\/code><\/pre>\n\n\n\nPipes booleanos: legibilidad en los templates<\/h2>\n\n\n\n
Una categor\u00eda que parece peque\u00f1a pero mejora mucho la legibilidad del c\u00f3digo:<\/p>\n\n\n\n
<!-- Verificaciones de tipo -->\n@if (valor | isString) {\n <span>{{ valor }}<\/span>\n}\n\n@if (datos | isArray) {\n <ul>...<\/ul>\n}\n\n<!-- Comparaciones -->\n@if (precio | isGreaterThan:1000) {\n <span class=\"premium\">Premium<\/span>\n}\n\n@if (stock | isLessEqualThan:5) {\n <span class=\"warning\">\u00a1\u00daltimas unidades!<\/span>\n}<\/code><\/pre>\n\n\n\nAntes y despu\u00e9s: un ejemplo real<\/h2>\n\n\n\n
Imagin\u00e1 una card de producto que muestra precio, nombre, descripci\u00f3n y stock. As\u00ed se ve sin<\/strong> pipes de utilidad:<\/p>\n\n\n\n\/\/ producto-card.component.ts (sin pipes)\nexport class ProductoCardComponent {\n @Input() producto!: Producto;\n\n get descripcionCorta(): string {\n return this.producto.descripcion.length > 120\n ? this.producto.descripcion.substring(0, 120) + '...'\n : this.producto.descripcion;\n }\n\n get stockLabel(): string {\n return this.producto.stock === 1 ? '1 unidad' : ${this.producto.stock} unidades;\n }\n\n get precioFormateado(): string {\n return new Intl.NumberFormat('es-AR', { style: 'currency', currency: 'ARS' }).format(this.producto.precio);\n }\n}<\/code><\/pre>\n\n\n\nY as\u00ed se ve con<\/strong> pipes de utilidad:<\/p>\n\n\n\n<!-- producto-card.component.html (con pipes) -->\n<div class=\"card\">\n <h3>{{ producto.nombre | ucFirst }}<\/h3>\n <p>{{ producto.descripcion | truncate:120 }}<\/p>\n <span class=\"price\">{{ producto.precio | currency:'ARS' }}<\/span>\n <span>{{ producto.stock }} {{ 'unidad' | makePluralString:producto.stock }}<\/span>\n\n @if (producto.stock | isLessEqualThan:5) {\n <span class=\"badge-warning\">\u00a1\u00daltimas unidades!<\/span>\n }\n<\/div><\/code><\/pre>\n\n\n\nEl componente qued\u00f3 sin l\u00f3gica de presentaci\u00f3n. Todo est\u00e1 en el template, declarativo, legible y testeable.<\/p>\n\n\n\n