Angular7 - Tuberías

En este capítulo, discutiremos sobre las tuberías en Angular 7. Las tuberías se llamaban anteriormente filtros en Angular1 y se llamaban tuberías desde Angular2 en adelante.

El | El carácter se utiliza para transformar datos. A continuación se muestra la sintaxis para el mismo:

{{ Welcome to Angular 7 | 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 archivo app.component.ts, hemos definido la variable de título de la siguiente manera:

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 7 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:

Aquí hay algunos tubos integrados disponibles con angular:

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 enapp.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 7 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 como se muestra a continuación -

<!--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 un nuevo archivo ts. Aquí, queremos crear la tubería personalizada sqrt. 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á PipeTransform.

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 { AppRoutingModule } from './app-routing.module'; 
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, 
      AppRoutingModule
   ], 
   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>

A continuación se muestra la salida:

↰ Previous page Next page ↱