Angular 4 - Tuberías
En este capítulo, discutiremos qué son las tuberías en Angular 4. Las tuberías se llamaban anteriormente filtros en Angular1 y se llamaban tuberías en Angular 2 y 4.
El | El carácter se utiliza para transformar datos. A continuación se muestra la sintaxis para el mismo
{{ Welcome to Angular 4 | lowercase}}
Toma enteros, cadenas, matrices y fecha como entrada separados con | para ser convertido en el formato requerido y mostrar el mismo en el navegador.
Consideremos algunos ejemplos que utilizan tuberías.
Aquí, queremos mostrar el texto dado en mayúsculas. Esto se puede hacer usando tuberías de la siguiente manera:
En el app.component.ts archivo, hemos definido la variable de título -
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
}
La siguiente línea de código entra en el app.component.html archivo.
<b>{{title | uppercase}}</b><br/>
<b>{{title | lowercase}}</b>
El navegador aparece como se muestra en la siguiente captura de pantalla:
Angular 4 proporciona algunas tuberías integradas. Las tuberías se enumeran a continuación:
- Lowercasepipe
- Uppercasepipe
- Datepipe
- Currencypipe
- Jsonpipe
- Percentpipe
- Decimalpipe
- Slicepipe
Ya hemos visto los tubos en minúsculas y mayúsculas. Veamos ahora cómo funcionan las otras tuberías.
La siguiente línea de código nos ayudará a definir las variables requeridas en app.component.ts archivo -
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 Project!';
todaydate = new Date();
jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}};
months = ["Jan", "Feb", "Mar", "April", "May", "Jun",
"July", "Aug", "Sept", "Oct", "Nov", "Dec"];
}
Usaremos las tuberías en el app.component.html archivo.
<!--The content below is only a placeholder and can be replaced.-->
<div style = "width:100%;">
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Uppercase Pipe</h1>
<b>{{title | uppercase}}</b><br/>
<h1>Lowercase Pipe</h1>
<b>{{title | lowercase}}</b>
<h1>Currency Pipe</h1>
<b>{{6589.23 | currency:"USD"}}</b><br/>
<b>{{6589.23 | currency:"USD":true}}</b> //Boolean true is used to get the sign of the currency.
<h1>Date pipe</h1>
<b>{{todaydate | date:'d/M/y'}}</b><br/>
<b>{{todaydate | date:'shortTime'}}</b>
<h1>Decimal Pipe</h1>
<b>{{ 454.78787814 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers to be displayed.
</div>
<div style = "width:40%;float:left;border:solid 1px black;">
<h1>Json Pipe</h1>
<b>{{ jsonval | json }}</b>
<h1>Percent Pipe</h1>
<b>{{00.54565 | percent}}</b>
<h1>Slice Pipe</h1>
<b>{{months | slice:2:6}}</b>
// here 2 and 6 refers to the start and the end index
</div>
</div>
Las siguientes capturas de pantalla muestran la salida de cada tubería:
¿Cómo crear una tubería personalizada?
Para crear una tubería personalizada, hemos creado una nueva tsarchivo. Aquí, queremos crear elsqrttubería personalizada. Le hemos dado el mismo nombre al archivo y tiene el siguiente aspecto:
app.sqrt.ts
import {Pipe, PipeTransform} from '@angular/core';
@Pipe ({
name : 'sqrt'
})
export class SqrtPipe implements PipeTransform {
transform(val : number) : number {
return Math.sqrt(val);
}
}
Para crear una tubería personalizada, tenemos que importar Pipe and Pipe Transform desde Angular / core. En la directiva @Pipe, tenemos que darle el nombre a nuestra tubería, que se usará en nuestro archivo .html. Dado que estamos creando la tubería sqrt, la llamaremos sqrt.
A medida que avanzamos, tenemos que crear la clase y el nombre de la clase es SqrtPipe. Esta clase implementará elPipeTransform.
El método de transformación definido en la clase tomará el argumento como número y devolverá el número después de sacar la raíz cuadrada.
Dado que hemos creado un nuevo archivo, debemos agregar el mismo en app.module.ts. Esto se hace de la siguiente manera:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
SqrtPipe,
AppComponent,
NewCmpComponent,
ChangeTextDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Hemos creado el app.sqrt.tsclase. Tenemos que importar lo mismo enapp.module.tsy especifique la ruta del archivo. También debe incluirse en las declaraciones como se muestra arriba.
Veamos ahora la llamada realizada a la tubería sqrt en el app.component.html archivo.
<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b>
<br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
La salida tiene el siguiente aspecto: