Pipes en Angular
Que son las pipes
Se encargan de transformar la visibilidad de los datos de una pagina wed, por ejemplo podemos cambiar el formato de la fecha, miércoles, 26 de agosto de 2020 Greenwich Mean Time (GMT) a 26 agosto 2020.
El | carácter se utiliza para transformar datos. La siguiente es la sintaxis para el mismo
{{ elemento | tipoPipe}}
Donde el elemento puede ser enteros, cadenas, matrices o fechas como entradas separada con | para convertirlas con el formato requerido y mostrarlo en el navegador.
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
titulo = 'Bienvenido a angular';
}
app.component.html:
<html>
<body>
<p>{{titulo | uppercase}}</p>
<p>{{titulo | lowercase}}</p>
</body>
</html>
Tipos de pipes proporcionadas por angular:
- lowercase
- uppercase
- date
- currency
- json
- percent
- decimal
- slice
Pipes personalizadas
Generamos un nuevo modulo:
ng generate module sqrt/sqrt --flat
Para crear una tubería personalizada vamos a implementar desde Angular/ core los módulos Pipe y Pipe Transform, y en la directiva @Pipe, damos el nombre a nuestra tubería, que vamos a utilizar en nuestro archivo .html
Después en la clase SqrtModule implementamos el modulo PipeTransform
Donde el método de
transformación definido en la clase tomará el argumento como un número y devolverá
su raíz cuadrada.
sqrt.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'sqrt'
})
@NgModule({
declarations: [],
imports: [
CommonModule
]
})
export class SqrtModule implements PipeTransform {
transform(val: number): number {
return Math.sqrt(val);
}
Después esta nueva
pipe personalizada la agregamos en app.module.ts.
Esto se hace de la siguiente manera:
En app.module .ts importamos el modulo creado:
import { SqrtModule } from './sqrt/sqrt.module';
Y lo añadimos a declarations
component.html:
<h1>Pipe de la raiz cuadrada</h1>
<b>la raiz cuadrada de 25 es: {{25 | sqrt}}</b>
<br/>
<b>la raiz cuadrada de 2209 es: {{2209 | sqrt}}</
Plantilla donde se hace uso de la pipe personalizada
No hay comentarios:
Publicar un comentario