Crear nuestro propio pipe en Angular

Hola a todos, hoy os voy a explicar como podemos crear un pipe en Angular.

Los pipes o tuberias en angular nos sirven para formatear el resultado en la parte de HTML como vimos, Angular tiene unos pipes predefinido. También podemos crear nuestros propios pipes.

Vamos a crear una carpeta donde esten tengamos los pipes dentro de app, llámala pipes

La idea de los pipes es que le pasemos algo y hagamos algo con ello.

En nuestro caso, vamos a crear un pipe para formatear un String para que sea valido una URL, simplemente lo pondremos en minúscula y cambiar los espacios por guiones.

Ahora crea un nuevo fichero, ponle de sufijo .pipe. Por ejemplo, formateaURL.pipe.ts

Usaremos esta estructura:

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

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

  transform(value: String): String {
     
  }

}

Ponle el nombre a la clase que necesites y en el name: pon como quieres que se llame el pipe.

El método transform es lo que realiza el pipe en sí. Podria quedarse asi:

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

@Pipe({
  name: 'formatLinks'
})
export class FormatLinksPipe implements PipeTransform {

  transform(value: String): String {
      return value.replace(' ', '-').toLowerCase();
  }

}

Ahora tenemos que declararlo en app.modules.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormatLinksPipe } from '../app/pipes/formateaURL.pipe';

import { AppComponent } from './app.component';
import { TestCompComponent } from './components/test-comp/test-comp.component';


@NgModule({
  declarations: [
    AppComponent,
    FormatLinksPipe,
    TestCompComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora vamos a crear un componente de prueba para testear nuestro pipe.

Crear un componente en angular de forma rápida

Os dejo una muestra:

Typescript

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-comp',
  templateUrl: './test-comp.component.html',
  styleUrls: ['./test-comp.component.css']
})
export class TestCompComponent implements OnInit {

  private url: String = "Enlace AL Componente"

  constructor() { }

  ngOnInit() {
  }

}

HTML

{{url | formatLinks}}

Este es el resultado:

Aquí puedes descargar el proyecto de ejemplo.

Espero que os sea de ayuda. Si tenéis dudas. Preguntad, estamos para ayudarte.