Tìm hiểu Pipes trong Angular 7

Hôm nay chúng ta sẽ thảo luận pipes trong Angular, pipes được gọi là filters trong angular 1 và angular 2 trở lên.

Sau đây là ví dụ sử dụng pipes trong angular

{{ Welcome to Angular 7 | lowercase}}

Nó lấy số nguyên, chuỗi, mảng và ngày làm đầu vào được phân tách bằng | được chuyển đổi theo định dạng theo yêu cầu và hiển thị giống nhau trên trình duyệt.

chúng ta thực hiện như sau:

ở trong file 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!'; 

}

app.component.html

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

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

Kết quả

Ở đây là những loại giá trị pipes angular

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

Chúng ta đã thấy các Pipes viết thường và viết hoa. Bây giờ chúng ta hãy xem các đường ống khác hoạt động như thế nào. Dòng mã sau sẽ giúp chúng tôi xác định các biến bắt buộc trong tệp 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!'; 

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

}

Chúng ta sử dụng pipes trong app.component.html

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

Kết quả

Cách thiết lập pipes trong angular

cách custom pipe trong angular nhu sau

Tạo một file ts 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);

   }

}

import trong file app.module.ts

@NgModule({

   declarations: [ 

      SqrtPipe, 

      AppComponent, 

      NewCmpComponent, 

      ChangeTextDirective 

   ], 

   imports: [ 

      BrowserModule, 

      AppRoutingModule

   ], 

   providers: [], 

   bootstrap: [AppComponent] 

}) 

export class AppModule { }

Trong file app.component.html chúng ta sử dụng lại

<h1>Custom Pipe</h1> 

<b>Square root of 25 is: {{25 | sqrt}}</b> 

<br/> 

<b>Square root of 729 is: {{729 | sqrt}}</b>

Kết quả như sau: