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 鈥減ipe鈥 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 57

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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.

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

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

}

Se me ocurri贸 esta soluci贸n. De esta manera, se hace un replace por cada una de las letras que se deseen:
.

.

P. D. Separ茅 la funci贸n reductora para que se vea m谩s ordenado.

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;

  }

}

Quiero crear mis propios pipes

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

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

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

aqu铆 dejo mi solucion saludos!

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

@Pipe({
  name: 'vocalNumeric'
})
export class VocalNumericPipe implements PipeTransform {

  transform(value: string): string {
    //usando expresiones regulares para que sea indiferente de mayustculas y minusculas
    value = value.replace(/a|A/g,'1');
    value = value.replace(/e|E/g,'2');
    value = value.replace(/i|I/g,'3');
    value = value.replace(/o|O/g,'4');
    value = value.replace(/u|U/g,'5');
    return value
  }

}

MI SOLUCI脫N

export class ChangeVowelsPipe implements PipeTransform {

  transform(value: string): string{
    let resp = {a:'@', e:'3', i:'1',o:'0'};

    return value.replace(/a|e|i|o/gi, function(x): string{
        let change = '';
        Object.entries(resp).forEach(([key, value]) =>{
          if(key === x){
            change = value;
          }
        })
        return change;
      })
  }
}

mi soluci贸n al reto. No puse un reemplazo a la u porque no considero que haya un n煤mero que entienda que es una U, a diferencia de las otras vocales.

export class HackerPipe implements PipeTransform {

  transform(value: string): string {
    let listOfWords:String[] = value.split('')
    let textTransformed:string[] = [];

    for (let i = 0; i < listOfWords.length; i++) {
      switch (listOfWords[i]) {
        case 'a' || 'A':
          textTransformed.push("4")
          break;
        case 'e' || 'E':
          textTransformed.push("3")
          break;
        case 'i' || 'I':
          textTransformed.push("1")
          break;
        case 'o' || 'O':
          textTransformed.push("0")
          break;
        default:
          textTransformed.push(`${listOfWords[i]}`)
          break;
      } 
    }
    return textTransformed.join('');
  }
}

Yo lo hice de la siguiente forma, para considerar vocales en mayusculas y en minusculas y asignando un numero random entre 1 a 10

  transform(value: string): string {
    const vocals: string = 'aeiouAEIOU';

    const randomInt = (min: number, max: number) =>
     Math.floor(Math.random() * (max - min + 1)) + min;

     for ( let letter of value){
          if(vocals.includes(letter))
          {
            value = value.split(letter).join(randomInt(1, 10).toString());
          }
     }

    return value;
  }

bastante sencillo el pipe

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

@Pipe({
  name: 'replaceVocal'
})
export class ReplaceVocalPipe implements PipeTransform {

  transform(valor: string,): string {
    const vocales:Record<string, string> ={a:'1', e:'2',i:'3',o:'4',u:'5'};
    const keys = Object.keys(vocales);
    let val = '';

    for (const key of keys) {
      const value = vocales[key];
      val = valor.replaceAll(key,value);
      valor = val;
    }

    return val;
  }

}```

Comparto mi soluci贸n al reto!
Utilic茅 un mapa:

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

@Pipe({
  name: 'numberize'
})
export class NumberizePipe implements PipeTransform {
  private keys = new Map();

  transform(value: string): string {
    this.keys.set('a', '4');
    this.keys.set('e', '3');
    this.keys.set('i', '1');
    this.keys.set('o', '0');

    let numberizedArr = value.split('').map((char) => {
      if (this.keys.has(char))
        return this.keys.get(char)

      return char;
    });
    return numberizedArr.join('');
  }
}

Mi resultado:

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


@Pipe({
  name: 'changeLetterToNumber'
})
/* Pipe que cambia una vocal por un numero */
export class ChangeLetterToNumberPipe implements PipeTransform {

  transform(value: string): string {

    let listNumbers: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    let numberRandom = () => {
      return listNumbers[Math.floor(Math.random() * listNumbers.length)].toString();
    }

    return value.replace(/a|A/gi, numberRandom())
        .replace(/e|E/gi, numberRandom())
        .replace(/i|I/gi, numberRandom())
        .replace(/o|O/gi, numberRandom())
        .replace(/u|U/gi, numberRandom())

  }

}
 

para m谩s caracteres鈥 y como es singleton鈥

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

@Pipe({
  name: 'chartonum'
})
export class CharToNumPipe implements PipeTransform {
  crypto = { a: '4', e: '3', i: '1', o: '0', z: '2', t: '7', b: '6', s: '5', }

  transform(value: string): string {
    let nuevoString = value;
    Object.entries(this.crypto).forEach(([llave, valor]) => {
      nuevoString = nuevoString.replace(new RegExp(llave, 'gi'), valor);
    });
    return nuevoString;
  }
}

Hola,

Me mand茅 esto que simplemente fuciona鈥 No es muy bonito y no sirve para las mayusculas. (de vago nom谩s).

export class VocalsToNumbersPipe implements PipeTransform {

  transform(value: string): string {
    return value.replace(/a/g, '4').replace(/e/g, '3').replace(/i/g, '1').replace(/o/g, '0').replace(/u/g, '6')
  }  }```

Aqui mi codigo.

transform(value: string): string {
    return  value.split('').map((e: string) => {
      const references: Record<string, string> = {
        'a':'1',
        'e':'2',
        'i':'3',
        'o':'4',
        'u':'5'
      }
      return references[e] ?? e
    }).join('')
  }
<code> 
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'convertVowels'
})
export class ConvertVowelsPipe implements PipeTransform {

  transform(value: string): string {
    return value.toLowerCase()
    .replaceAll('a', '1')
    .replaceAll('e', '2')
    .replaceAll('i', '3')
    .replaceAll('o', '4')
    .replaceAll('u', '5');
  }

}

Llegu茅 a dos soluciones para el Pipe. La primera fue esta:

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

@Pipe({ name: 'vowels' })
export class VowelsPipe 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, '4');
  }
}

La otra forma fue esta:

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

@Pipe({ name: 'vowels' })
export class VowelsPipe implements PipeTransform {
  transform(value: string): string {
    return value.replace(/[aeiou]/gi, (vowel) => ('aeiou'.indexOf(vocal) + 1).toString())
  }
}

Creando nuestro Pipe

Para crear nuestro Pipe personalizado podemos ejecutar el comando:

ng generate pipe <name-file>
ng g p <name-file>

Esto generar谩 un nuevo archivo en la carpeta src/app de tu proyecto llamado name-file**.pipe.ts**.

Dentro de este archivo se crea una clase con el decorador @Pipe. Por ejemplo:

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

@Pipe({
  name: 'miPipe'
})
export class MiPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // C贸digo para transformar el valor
  }
}

Implementa la interfaz PipeTransform, que define un m茅todo transform() que toma el valor original y los argumentos y devuelve el valor transformado. Puedes agregar la l贸gica que necesites en este m茅todo para transformar el valor seg煤n tus necesidades.

  • Usa el nombre que le has dado a tu pipe en la propiedad name del decorador @Pipe. Este es el nombre que usar谩s para llamar al pipe en la plantilla.
  • Usa el pipe en la plantilla, pasando los argumentos que necesites. Por ejemplo:
<p>{{ miVariable | miPipe: argumento1: argumento2 }}</p>

Donde miVariable es el valor que quieres transformar, miPipe es el nombre del pipe y argumento1 y argumento2 son los argumentos que pasas al pipe.

Mi soluci贸n deja pasar 5 argumentos, si se deja en vac铆o, se aplica una transformaci贸n por default, si se pasan menos de 5, se aplican los primeros n argumentos a las primeras n vocales, el resto como en la transformaci贸n por default. Por 煤ltimo, si se pasan m谩s de 5, solo se tienen en cuenta los 5 primeros argumentos:

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

@Pipe({
  name: 'transformVowels'
})
export class TransformVowelsPipe implements PipeTransform {

  transform(value: string, ...args: string[]): string {
    const defaultTrans = ['@', '3', '!', '0', '眉'];
    if (args.length === 0) args = defaultTrans;
    if (args.length < 5) {
      args = args.concat(defaultTrans.slice(-args.length + 1));
    }
    if (args.length > 5) {
      args = args.slice(0, 5);
    }
    return value
    .replace(/(a)/g, args[0])
    .replace(/(e)/g, args[1])
    .replace(/(i)/g, args[2])
    .replace(/(o)/g, args[3])
    .replace(/(u)/g, args[4]);;
  }

}

Cuando instalen una dependencia de NPM no olviden el --save para que sus colegas cuando bajen sus cambios y hagan npm install se agregue dicha dependencia de lo contrario no va a funcionar

Las regex son poderosas:

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

@Pipe({
  name: 'replaceVowelsForNumbers'
})
export class ReplaceVowelsForNumbersPipe implements PipeTransform {

  transform(value: string): string {
    let newValue: string = value;

    newValue = newValue.replace(/a/i, '4');
    newValue = newValue.replace(/e/i, '3');
    newValue = newValue.replace(/i/i, '1');
    newValue = newValue.replace(/o/i, '0');
    newValue = newValue.replace(/u/i, 'w-w');

    return newValue;
  }

}

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

@Pipe({
  name: 'vowelsToNumber'
})
export class VowelsToNumberPipe implements PipeTransform {

  transform(word: string): string {
    const vowels:any = {
      'a':'4',
      'e':'3',
      'i':'1',
      'o':'0',
      's':'5',
      'g':'9',
      't':'7',
    }
    return word.split('').map((word:string)=> (word in vowels)? vowels[word]: word).join('')
  }

}

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

@Pipe({
    name: 'cambioVocales'
})
export class CambioVocalesPipe implements PipeTransform {
    cambio: string[][] = [
        [ 'e', '3' ],
        [ 'o', '0' ],
        [ 'i', '1' ],
        [ 'a', '5' ],
        [ 'u', '7' ],
        [ 'E', '3' ],
        [ 'O', '0' ],
        [ 'I', '1' ],
        [ 'A', '5' ],
        [ 'U', '7' ],
    ];
    transform( valor: string ): string {
        this.cambio.map( ( elemento ) => {
            valor = valor.replaceAll( elemento[0], elemento[1] );
        } );
        return valor;
    }

}

Este fue mi ejercicio

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

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

  transform(value: string): string {    
    return value.replace(/a/gi, "1")
           .replace(/e/gi, "2")
           .replace(/i/gi, "3")
           .replace(/o/gi, "4")
           .replace(/u/gi, "5");
  }
}

Mi soluci贸n fue:

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

@Pipe({
  name: 'vocales'
})
export class VocalesPipe implements PipeTransform {

  transform(value: string): string {
    return value
      .replace(/[Aa]/g, '4')
      .replace(/[Ee]/g, '3')
      .replace(/[Ii]/g, '1')
      .replace(/[Oo]/g, '0')
      .replace(/[Uu]/g, '渭');
  }

}

La soluci贸n que use para el reto fue guardar las vocales en un array y mostrar el index de las vocales.

Pipie:

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

@Pipe({
  name: 'vowelNumber'
})
export class VowelNumberPipe implements PipeTransform {

  vowels=["A","a","E","e","I","i","O","o","U","u"];

  transform(value: string): string {
    return value.split("").map((element)=>{
      let index = this.vowels.indexOf(element);
      return index != -1 ? index : element;
    }).join("");
  }

}

Html de ejemplo:

<p>
    {{"Este es un texto de ejemplo para propar mi propio pipe" | vowelNumber}}
</p>

Mi soluci贸n al reto propuesto

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

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

    CHARACTERS : string[] = ['a','e','i','o','u']

    transform(value: string): string {
        let newString = value.split('').map(char => {
            return this.CHARACTERS.find(lyric => lyric == char) === undefined ? char : this.CHARACTERS.indexOf(char) + 1
        })
        return newString.join('')
    }

}

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

@Pipe({
  name: 'changeVocalToNumber'
})
export class ChangeVocalToNumberPipe implements PipeTransform {

  cadena: string[] = [];
  i =0;

  transform(value: string,): string {

    this.cadena = value.split('');

    for(this.i = 0; this.i<this.cadena.length; this.i++){
          switch(this.cadena[this.i]){
            case 'a':
              this.cadena[this.i]='5';
            break;
            case 'e':
              this.cadena[this.i]='3';
            break;
            case 'i':
              this.cadena[this.i]='1';
            break;
            case 'o':
              this.cadena[this.i]='0';
            break;
            case 'u':
              this.cadena[this.i]='9';
            break;
          }
    }


    return this.cadena.join('');
  }

}

Mi aporte:

  transform(value: string): string {
    return value.split('').reduce( (finalValue, letter) => {

      const coincidencens = this.letters.filter( item => item.name === letter );

      if( coincidencens.length != 0 ){
        const coincidence = coincidencens[0];
        return finalValue += coincidence.position;
      }

      return finalValue += letter;
    } , '' );
  }

Esta es la forma como lo resolv铆:

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

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

  transform(value: string): string {
    return value.toLowerCase()
           .replace(/a/g, "1").replace(/谩/g, "1")
           .replace(/e/g, "2").replace(/茅/g, "2")
           .replace(/i/g, "3").replace(/铆/g, "3")
           .replace(/o/g, "4").replace(/贸/g, "4")
           .replace(/u/g, "5").replace(/煤/g, "5");
  }

}

Esta fue mi solucion al reto

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

@Pipe({
  name: 'replaceVowels'
})
export class ReplaceVowelsPipe implements PipeTransform {

  transform(value: string): string {
    const vowels: string[] = ['a', 'e', 'i', 'o', 'u'];
    let word: string = '';

    for (let i = 0; i < value.length; i++) {
      if (vowels.includes(value[i])) {
        word += '1';
      } else {
        word += value[i];
      }
    }

    return word;
  }

}

Creo que finalmente consegu铆 el Pipe tuneado para transformar cada vocal del string en un n煤mero:
export class TransformVowelsPipe implements PipeTransform {

listVowels = [ , , 鈥榓鈥, 鈥榚鈥, 鈥榠鈥, 鈥榦鈥, 鈥榰鈥橾;

transform(value: string): string {
let value2 = value.split(鈥欌).map(c => {
return c === (鈥榓鈥) ||
c === (鈥榚鈥) ||
c === (鈥榠鈥) ||
c === (鈥榦鈥) ||
c === (鈥榰鈥)? this.listVowels.indexOf漏 : c
});
return value2.join(鈥欌);
}
}

Est谩 forma fue como lo hice, con los conocimientos y l贸gica que tengo, pero estuve pensando en una soluci贸n similar a la del compa帽ero Jhonatan Segura, que me parece m谩s eficiente.

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

@Pipe({
  name: 'transformVowels',
})
export class TransformVowelsPipe implements PipeTransform {
  transform(value: string): string {
    console.log('====================================');
    console.log(value.split(''));
    console.log('====================================');
    return value
      .split('')
      .map((value) => {
        switch (value) {
          case 'a' && 'A':
            return '4';
            break;
          case 'o' && 'O':
            return '0';
            break;
          case 'e' && 'E':
            return '3';
            break;
          case 'i' && 'I':
            return '1';
            break;
          case 'g' && 'G':
            return '6';
            break;
          case 'b' && 'B':
            return '8';
            break;
          case 't' && 'T':
            return '7';
            break;
          case 's' && 'S':
            return '5';
            break;
          default:
            return value;
            break;
        }
      })
      .join('');
  }
}

import { Pipe, PipeTransform } from 鈥楡angular/core鈥;

@Pipe({
name: 鈥榲ocalToNumber鈥,
})
export class VocalToNumberPipe implements PipeTransform {
transform(value: string): string {
value = value.replace(鈥榓鈥, 鈥9鈥);
value = value.replace(鈥榚鈥, 鈥3鈥);
value = value.replace(鈥榠鈥, 鈥1鈥);
value = value.replace(鈥榦鈥, 鈥0鈥);
value = value.replace(鈥榰鈥, 鈥5鈥);
return value;
}
}

Buenos d铆as,

comparto pipe del reto:

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

@Pipe({
  name: 'reto'
})
export class RetoPipe implements PipeTransform {

  transform(value: string): string {
    const splitValue = value.split('');

    for (let i = 0; i < splitValue.length; i++) {
      switch (splitValue[i].toLowerCase()) {
        case 'a':
          splitValue[i] = '4';
          break;
        case 'e':
          splitValue[i] = '3';
          break;
        case 'i':
          splitValue[i] = '1';
          break;
        case 'o':
          splitValue[i] = '0';
          break;
        case 'u':
          splitValue[i] = '5';
          break;
      }
    }

    return splitValue.join('');
  }

}

Gracias

Aca va mi solucion:

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

@Pipe({
  name: 'vowels'
})
export class VowelsPipe implements PipeTransform {
  vocales: string[] = ['A', 'E', 'I', 'O', 'U'];

  transform(value: string): string {

    const newvalue = value.split('').map((letra) => {
      if (this.vocales.includes(letra.toUpperCase())) {
        return this.vocales.indexOf(letra.toUpperCase())
      }
      else return letra;
    })
    return newvalue.join('');
  }

}


@Pipe({
  name: 'vocalTransform'
})
export class VocalTransformPipe implements PipeTransform {

  transform(value:string): string {
    let newString = value.replace(/a/gi, '4');
    newString = newString.replace(/e/gi, '3');
    newString = newString.replace(/i/gi, '1');
    newString = newString.replace(/o/gi, '0');
    newString = newString.replace(/u|v/gi, '^');
    return newString;
  }

}

export class VocalstonumbersPipe implements PipeTransform {
  vocals: string[] = ['a', 'e', 'i', 'o', 'u'];
  transform(value: string): string {
    const vocalTransfromed = value.split('').map((letter) => {
      if (this.vocals.includes(letter)) {
        return this.vocals.indexOf(letter);
      }
      return letter;
    }, this);
    return vocalTransfromed.join('');
  }
}

aqui esta mi format de hacerlo =)

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

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

  transform(value: string): string {
    return value.replace('a','4')
    .replace('e','3')
    .replace('i','1')
    .replace('o','0')
    .replace('u','6');
  }

}

My implementation for the challenge.

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

  }

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

}

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

}