Angolare 6 - Tubi
In questo capitolo, discuteremo cosa sono i tubi in Angular 6. I tubi erano precedentemente chiamati filtri in Angular1 e chiamati pipe in Angular 2 in poi.
Il | Il carattere viene utilizzato per trasformare i dati. Di seguito è riportata la sintassi per lo stesso
{{ Welcome to Angular 6 | 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 app.component.ts file, abbiamo definito la variabile del titolo -
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 6 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:
Angular 6 fornisce alcuni tubi integrati. I tubi sono elencati di seguito:
- 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 in app.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 6 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.
<!--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 un pipe personalizzato, abbiamo creato un nuovo tsfile. Qui vogliamo creare il filesqrttubo personalizzato. 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à ilPipeTransform.
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 { 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 { }
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>
L'output è il seguente: