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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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.
Os dejo una muestra:
Typescript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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
|
1 |
{{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.
Deja una respuesta