No tienes acceso a esta clase

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

Construyendo tu propio pipe

16/20
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 19

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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;
  }
}

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('');
  }
}

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");
  }
}

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.

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('');
  }

}

apunte a usar los aprendido en el curso de arrays

export class A1Pipe implements PipeTransform {

  transform(value: string): string {
   return value
    .split('a').join('0')
    .split('e').join('2')
    .split('i').join('3')
    .split('o').join('4')
    .split('u').join('5')
  }
}

Esta es mi solución, ¿que les parece?

export class ToEmoLettterPipe implements PipeTransform {
  vocals = 'aeiouAEIOU'
  replace = '4310ü4310X'
  transform(paragraph: string): string {
    let NewParahraph = '';
    for (let i_letter = 0; i_letter < paragraph.length; i_letter++) {
      let IS_VOCAL = false;
      for (let vocal = 0; vocal < this.vocals.length; vocal++) {
        IS_VOCAL = IS_VOCAL || paragraph[i_letter] == this.vocals[vocal]
        if (IS_VOCAL) {
          NewParahraph += this.replace[vocal];
          break
        }
      }
      if (!IS_VOCAL) NewParahraph += paragraph[i_letter]
    }
    return NewParahraph;

  }

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

@Pipe({
  name: 'changeVocals'
})

export class ChangeVocalsPipe implements PipeTransform {
  transform(value: string): string {
    return value
      .replace(/a/gi,'4')
      .replace(/e/gi,'3')
      .replace(/i/gi,'1')
      .replace(/o/gi,'0')
      .replace(/u/gi,'5');
  }
}

Comparto mi solución

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

@Pipe({
  name: 'convertvowelstonumbers'
})
export class ConvertvowelstonumbersPipe implements PipeTransform {

  transform(value: string): string {
    return value.split('').map(char => {
      if (char === 'a') {
        return '1';
      } else if (char === 'e') {
        return '2';
      } else if (char === 'i') {
        return '3';
      } else if (char === 'o') {
        return '4';
      } else if (char === 'u') {
        return '5';
      } else {
        return char;
      }
    }
    ).join('');
  }

  }

Solución haciendo uso de expresiones regulares.

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

@Pipe({
  name: "cambiarLetras",
})
export class CambiarLetrasPipe implements PipeTransform {
  transform(value: string): string {
    return value
	.replace(/a|A/gi, '4')
    	.replace(/e|E/gi, '3')
    	.replace(/i|I/gi, '1')
    	.replace(/o|O/gi, '0')
    	.replace(/u|U/gi, '5');
  }
}

aplicando la validacion tanto para vocales minusculas y mayuculas.

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

@Pipe({
  name: 'vowelToNumber'
})
export class VowelToNumberPipe implements PipeTransform {

  transform(value: string): string {
    return value.replace(/a|A/gi, '4')
    .replace(/e|E/gi, '3')
    .replace(/i|I/gi, '1')
    .replace(/o|O/gi, '0')
    .replace(/u|U/gi, '∩');
  }

}

Utilice un UpperCase para que sea más fácil validar la letra indistinto de mayusculas o minusculas.

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

@Pipe({
  name: 'vocals'
})
export class VocalsPipe implements PipeTransform {

  transform(value: string): string {
    let separate= value.split('');
    separate.forEach(function(letter, i) {
      switch(letter.toUpperCase()){
        case 'A' :{
          separate[i]='1';
          break;
        }
        case 'E':{
          separate[i]='2';
          break;
        }
        case 'I':{
          separate[i]='3';
          break;
        }
        case 'O':{
          separate[i]='4';
          break;
        }
        case 'U':{
          separate[i]='5';
          break;
        }
      }
    });
   
    return separate.join('');
  }

}

Me quedó la duda de que otras alternativas hay para evitar el _any _ al declarar el objeto numbers.

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

@Pipe({
  name: 'vocalsToNumbers'
})
export class VocalsToNumbersPipe implements PipeTransform {

  transform(value: string): string {
    const numbers: any = {
      'a': '1',
      'e': '2',
      'i': '3',
      'o': '4',
      'u': '5'
    }
    return value.split('').reduce((newStr, letter) => {
      newStr += numbers[letter.toLowerCase()] ? numbers[letter.toLowerCase()] : letter
      return newStr;
    }, '');   
  }
}

Hola,
Comparto mi solución. Use un diccionario de tipo map y sus métodos, como has() y get().
Además aproveché la función map() de arrays para transformar las vocales.

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

@Pipe({
  name: 'vocalesPorNumeros'
})
export class VocalesPorNumerosPipe implements PipeTransform {

  vocales: Map<string, string> = new Map([
    ["a", "4"],
    ["e", "3"],
    ["i", "1"],
    ["o", "0"],
    ["u", "u"],
  ]);


  transform(value: string): string {
   return  value.split("")
                .map(letra => this.vocales.has(letra) ? this.vocales.get(letra) : letra)
                .join("");
  }

}

Listo 😃

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

@Pipe({
  name: 'vowels'
})
export class VowelsPipe implements PipeTransform {

  transform(value: string): string {
    let arrValue = value.split('');
    arrValue.map((item, i) => {
      if (item ==='A' || item ==='a') {
        arrValue.splice(i, 1, '4');
      } else if(item ==='E' || item ==='e') {
        arrValue.splice(i, 1, '3');
      } else if(item ==='I' || item ==='i') {
        arrValue.splice(i, 1, '1');
      } else if(item === 'O' || item === 'o') {
        arrValue.splice(i, 1, '0');
      } else if(item === 'U' || item === 'u') {
        arrValue.splice(i, 1, '5');
      }
    });
    return arrValue.join('');
  }

}

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

@Pipe({
  name: 'changeVowels'
})
export class ChangeVowelsPipe implements PipeTransform {

  transform(value: string): string {
    return value.split('a').join('2').split('A').join('2')
    .split('e').join('3').split('E').join('3')
    .split('i').join('1').split('I').join('1')
    .split('o').join('0').split('O').join('0')
    .split('u').join('4').split('U').join('4');
  }

}

Aqui dejo el ejercicio, soy un poco novato en js 😃

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

@Pipe({
  name: 'vocalToNumber'
})
export class VocalToNumberPipe implements PipeTransform {

  transform(value: string): string {

   let arr = value.split('');
   arr.forEach(function(letter, index) {

      switch (letter) {
        case 'a':
          arr[index] = "4"
          break;

          case 'e':
            arr[index] = '3'
          break;

          case 'i':
            arr[index] = '1'
          break;

          case 'o':
            arr[index] = '0'
          break;

          case 'u':
            arr[index] = '8'
          break;

      }
    })

    return arr.join('');
  }

}

RESUMEN:

CONSTRUYENDO TU PROPIO PIPE

-> ng g p pipes/reverse

INSTALAR LIBRERIA PARA MANIPULAR FECHAS
-> npm i date-fns


import { formatDistance } from 'date-fns';

@Pipe({
  name: 'timeAgo',
})
export class TimeAgoPipe implements PipeTransform {
  transform(value: Date): String {
    return formatDistance(new Date(), value);
  }
}

La forma en que lo hice.
!


@Pipe({
  name: 'letrasANumeros'
})
export class LetrasANumerosPipe implements PipeTransform {

  transform(value: string,): string {

    var letras = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','ñ','o','p','q','r','s','t','u','v','w','x','y','z']
    var regresa=[];
    for (let item of value) {
      for (let letra of letras){
        if (item == letra || item == letra.toUpperCase()) {
          regresa.push(letras.indexOf(letra) );
        }
      }
      }
    return regresa.toString();
  }

}