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.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *