Angular7 - Pipa

Dalam bab ini, kita akan membahas tentang Pipa di Angular 7. Pipa sebelumnya disebut filter di Angular1 dan disebut pipa dari Angular2 dan seterusnya.

The | karakter digunakan untuk mengubah data. Berikut ini adalah sintaks yang sama -

{{ Welcome to Angular 7 | lowercase}}

Dibutuhkan integer, string, array, dan tanggal sebagai input yang dipisahkan dengan | untuk diubah dalam format yang diperlukan dan tampilan yang sama di browser.

Mari kita perhatikan beberapa contoh penggunaan pipa. Di sini, kami ingin menampilkan teks yang diberi huruf besar. Ini dapat dilakukan dengan menggunakan pipa sebagai berikut -

Di file app.component.ts, kami telah mendefinisikan variabel judul sebagai berikut -

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!'; 
}

Baris kode berikut masuk ke app.component.html file -

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

Browser muncul seperti yang ditunjukkan pada tangkapan layar berikut -

Berikut adalah beberapa pipa built-in yang tersedia dengan sudut -

Lowercasepipe
Uppercasepipe
Datepipe
Currencypipe
Jsonpipe
Percentpipe
Decimalpipe
Slicepipe

Kami telah melihat pipa huruf kecil dan huruf besar. Sekarang mari kita lihat bagaimana pipa lainnya bekerja. Baris kode berikut akan membantu kita menentukan variabel yang dibutuhkan diapp.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"]; 
}

Kami akan menggunakan pipa di app.component.html file seperti yang ditunjukkan di bawah ini -

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

Tangkapan layar berikut menunjukkan keluaran untuk setiap pipa -

Bagaimana Cara Membuat Pipa Kustom?

Untuk membuat pipa khusus, kami telah membuat file ts baru. Di sini, kami ingin membuat pipa kustom sqrt. Kami telah memberikan nama yang sama ke file tersebut dan tampilannya sebagai berikut -

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

Untuk membuat pipa khusus, kita harus mengimpor Transformasi Pipa dan Pipa dari Sudut / inti. Di direktif @Pipe, kita harus memberi nama pada pipa kita, yang akan digunakan dalam file .html kita. Karena, kami membuat pipa sqrt, kami akan menamainya sqrt.

Saat kita melangkah lebih jauh, kita harus membuat kelas dan nama kelasnya adalah SqrtPipe. Kelas ini akan mengimplementasikan PipeTransform.

Metode transformasi yang didefinisikan di kelas akan mengambil argumen sebagai angka dan akan mengembalikan angka setelah mengambil akar kuadrat.

Karena kita telah membuat file baru, kita perlu menambahkan file yang sama app.module.ts. Ini dilakukan sebagai berikut -

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

Kami telah menciptakan app.sqrt.tskelas. Kami harus mengimpor yang samaapp.module.tsdan tentukan jalur file. Itu juga harus dimasukkan dalam deklarasi seperti yang ditunjukkan di atas.

Sekarang mari kita lihat panggilan yang dilakukan ke pipa sqrt di app.component.html mengajukan.

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

Berikut adalah outputnya -