Construyendo tu propio pipe

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Para poder afirmar que estás construyendo tu propio Pipe, es necesario hacer uso del CLI de Angular con el comando ng generate pipe test-name o en su forma corta con ng g p test-name.

Mi primer “pipe” en Angular

De la misma manera que lo hace con los servicios y componentes, el CLI creará un archivo .ts que contiene el código del pipe y un archivo .spec.ts para sus respectivas pruebas unitarias.

// pipes/test-name.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'testName'
})
export class TestNamePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

El pipe ya trae algo de código y configuraciones por defecto. Tendrás que cambiar los unknown por el tipeado que necesites dependiendo el pipe que estés generando.

Es importante observar el decorador @Pipe() que contiene el nombre del pipe, para así poder llamarlo en tu HTML.
Y no olvides importar el pipe en el módulo de tu aplicación para que este pueda ser utilizado.

// app.module.ts
import { TestNamePipe } from './pipes/test-name.pipe';
@NgModule({
  declarations: [
    // ...
    TestNamePipe,
  ],
  imports: [
    // ...
  ],
  providers: [],
  bootstrap: [ /* ... */ ]
})
export class AppModule { }

Currency pipe personalizado

Vamos a crear tu propio currency pipe. Para esto harás uso del objeto global de Javascript Intl. Si no conocías este objeto, puedes leer más al respecto de su Especificación de ECMAScript.

El global Jacascript Intl, proporciona una API de internacionalización para el formateo de monedas y fechas, entre otras funcionalidades más.

Veamos un ejemplo de cómo utilizarlo:

// pipes/custom-currency.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customCurrency'
})
export class CustomCurrencyPipe implements PipeTransform {

  transform(value: number, ...args: string[]): string {
    const divisa = args[0];

    if (divisa == 'USD')
      return new Intl.NumberFormat('en-us', { style: 'currency', currency: 'USD' }).format(value);
    else
      return new Intl.NumberFormat('es-ar', { style: 'currency', currency: 'ARS' }).format(value);
  }

}

El pipe recibe un parámetro del tipo numbery usando el segundo parámetro args puedes capturar las variables que necesites pasarle. En este ejemplo, lo empleamos para configurar el tipo de divisa.
Verificamos qué divisa se está pasando por parámetro. Si es USD, empleando el objeto Intl damos formato a la moneda para que sea $1,000.00 mientras que con cualquier otra divisa sea $1.000,00. Nota la pequeña diferencias de intercambiar el punto y la coma para formatear el número y los decimales.

Finalmente, utiliza tu nuevo pipe en el HTML de la siguiente manera:

<div>
    {{ 1000 | customCurrency:'USD' }}
</div>

Los pipes utilizan un concepto llamado Memoization para ahora en tiempo de ejecución guardando el resultado de las funciones en memoria.
Emplea tus propios pipes siempre que sea posible para optimizar tu aplicación.

Ver código fuente del proyecto

Contribución creada con los aportes de Kevin Fiorentino.

Aportes 63

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Joel Moises Boada Velasquez

hace 3 años

Use expresiones regulares en replace()

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'vocales',
})
export class VocalesPipe implements PipeTransform {
  transform(value: string): string {
    let newString = value.replace(/a/gi, '@');
    newString = newString.replace(/e/gi, '3');
    newString = newString.replace(/i/gi, '1');
    newString = newString.replace(/o/gi, '0');
    newString = newString.replace(/u/gi, '|_|');
    return newString;
  }
}

José Mauricio Lemús Rodezno

hace 3 años

Mi solución al reto usando expresiones regulares:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "changeVowels",
})
export class ChangeVowelsPipe implements PipeTransform {
  transform(value: string): string {
    return value
      .replace(/(a)/g, "1")
      .replace(/(e)/g, "2")
      .replace(/(i)/g, "3")
      .replace(/(o)/g, "4")
      .replace(/(u)/g, "5");
  }
}

Jhonatan Segura

hace 3 años

Espero que se entienda, al igual que el profe separe separe el string a un array, lo mapeé y si una palabra se encuentra en el diccionario(vowels) retorna el valor del diccionario, sino, me retorna la misma letra; y por ultimo uní el array.

hace 3 años

El reto lo cree de esta manera

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'vocales',
})
export class VocalesPipe implements PipeTransform {
  transform(value: string): string {
    let valueWithNumbers: string[] = [''];
    value.split('').forEach((data) => {
      switch (data) {
        case 'a': {
          valueWithNumbers.push('4');
          break;
        }
        case 'e': {
          valueWithNumbers.push('3');
          break;
        }
        case 'i': {
          valueWithNumbers.push('1');
          break;
        }
        case 'o': {
          valueWithNumbers.push('0');
          break;
        }
        case 'u': {
          valueWithNumbers.push('❌');
          break;
        }

        default: {
          valueWithNumbers.push(data);
        }
      }
    });

    return valueWithNumbers.join('');
  }
}

Emilio Nicolás Mendoza Patti

hace 3 años

Dejo el codigo del reto

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'vowelsToNumbers'
})
export class VowelsToNumbersPipe implements PipeTransform {

  transform(value: string): string {
    return value.split('').map(leter => leter.replace('a', '4')
    .replace('e', '3')
    .replace('i', '1')
    .replace('o', '0')
    .replace('u', '11')).join('');
  }

}

Kevin J. Zea Alvarado

Si ya tienes una cuenta,

Curso de Angular: Componentes y Servicios

Construyendo tu propio pipe

Mi primer “pipe” en Angular

Currency pipe personalizado

Veamos un ejemplo de cómo utilizarlo:

MI SOLUCIÓN

Creando nuestro Pipe

My implementation for the challenge.