Angular7 - Tubi

In questo capitolo, discuteremo dei tubi in Angular 7. I tubi erano precedentemente chiamati filtri in Angular1 e chiamati pipe da Angular2 in poi.

Il | Il carattere viene utilizzato per trasformare i dati. La seguente è la sintassi per lo stesso -

{{ Welcome to Angular 7 | lowercase}}

Richiede numeri interi, stringhe, array e date come input separati da | da convertire nel formato richiesto e visualizzare lo stesso nel browser.

Consideriamo alcuni esempi di utilizzo di pipe. Qui, vogliamo visualizzare il testo dato in maiuscolo. Questo può essere fatto usando i tubi come segue:

Nel file app.component.ts, abbiamo definito la variabile del titolo come segue:

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 seguente riga di codice va nel file app.component.html file -

<b>{{title | uppercase}}</b><br/> 
<b>{{title | lowercase}}</b>

Il browser viene visualizzato come mostrato nella seguente schermata:

Ecco alcuni tubi da incasso disponibili con angolare -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Abbiamo già visto le pipe minuscole e maiuscole. Vediamo ora come funzionano gli altri tubi. La seguente riga di codice ci aiuterà a definire le variabili richieste inapp.component.ts file -

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"]; 
}

Useremo i tubi in app.component.html file come mostrato di seguito -

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

Le schermate seguenti mostrano l'output per ogni pipe:

Come creare un tubo personalizzato?

Per creare una pipe personalizzata, abbiamo creato un nuovo file ts. Qui, vogliamo creare la pipe personalizzata sqrt. Abbiamo dato lo stesso nome al file e appare come segue:

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);
   }
}

Per creare una pipe personalizzata, dobbiamo importare Pipe and Pipe Transform da Angular / core. Nella direttiva @Pipe, dobbiamo dare il nome alla nostra pipe, che verrà usata nel nostro file .html. Dato che stiamo creando la pipe sqrt, la chiameremo sqrt.

Man mano che procediamo oltre, dobbiamo creare la classe e il nome della classe è SqrtPipe. Questa classe implementerà PipeTransform.

Il metodo di trasformazione definito nella classe prenderà come argomento il numero e restituirà il numero dopo aver preso la radice quadrata.

Dato che abbiamo creato un nuovo file, dobbiamo aggiungere lo stesso in app.module.ts. Questo viene fatto come segue:

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 { }

Abbiamo creato il file app.sqrt.tsclasse. Dobbiamo importare lo stesso inapp.module.tse specificare il percorso del file. Deve anche essere incluso nelle dichiarazioni come mostrato sopra.

Vediamo ora la chiamata effettuata alla pipe sqrt nel file app.component.html file.

<h1>Custom Pipe</h1> 
<b>Square root of 25 is: {{25 | sqrt}}</b> 
<br/> 
<b>Square root of 729 is: {{729 | sqrt}}</b>

Di seguito è riportato l'output: