Pipe trong angular 4 - Angular4
Trong chương này, chúng ta sẽ tìm hiểu về Pipe trong Angular 4 (AngularJS gọi là filter). Pipe được sử dụng để chuyển đổi dữ liệu. Cú pháp sử dụng pipe Cú pháp sử dụng pipe rất đơn giản: {{du_lieu | pipe}} - du_lieu: là dữ liệu cần chuyển đổi - ...
Trong chương này, chúng ta sẽ tìm hiểu về Pipe trong Angular 4 (AngularJS gọi là filter).
Pipe được sử dụng để chuyển đổi dữ liệu.
Cú pháp sử dụng pipe
Cú pháp sử dụng pipe rất đơn giản:
{{du_lieu | pipe}}
Ví dụ bạn cần hiển thị 1 chuỗi ra màn hình là chữ hoa (uppercase)
{{ "Xin chào" | uppercase}}
Khi đó, ở trình duyệt sẽ hiển thị:
Như bạn đã thấy, chuối "Xin chào" đã được chuyển toàn bộ thành "XIN CHÀO".
Một số pipe dựng sẵn (built-in pipe) của Angular
Angular xây dựng sẵn 1 số built-in pipe thường dùng như bảng dưới.
một ví dụ nhỏ sử dụng các built-in pipe của Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 4 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"];
}<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:"VND"}}</b><br/>
<b> {{6589.23 | currency:"VND":true}}</b> // Giá trị true để hiển thị kí hiệu của tiền tệ.
<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 là phần nguyên, 4-4 là phần thực
</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>
// 2 và 6 là vị trí bắt đầu và vị trí kết thúc
</div>
</div>Tự tạo 1 pipe
Để tạo và sử dụng 1 pipe trong project bạn cần làm các bước sau:
1. Tạo pipe
2. Import pipe vào project: khai báo trong file app.module.ts
3. Sử dụng pipe trong file html
Cùng đi vào ví dụ cụ thể: tạo pipe sqrt để tính căn bậc hai
Tạo pipe
Đầu tiên, ta tạo file 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);
}
}Dòng đầu tiên, ta import Pipe và PipeTransform từ thư viện của Angular core
import {Pipe, PipeTransform} from '@angular/core';
Tiếp đó khai báo tên cho pipe này là sqrt:
@Pipe ({
name : 'sqrt'
})Import pipe
Để import pipe vào project, ta cần khai báo chúng trong app.module.ts
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';
// Chỉ ra đường dẫn của sqrt pipe
import { SqrtPipe } from './app.sqrt';
@NgModule({
declarations: [
AppComponent,
NewCmpComponent,
ChangeTextDirective,
// Khai báo sqrt pipe
SqrtPipe
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Sử dụng pipe
Sử dụng pipe sqrt tương tự như các pipe khác: <b>Căn bậc hai của 25 là : {{25 | sqrt}}</b>
Kết quả hiển thị:
Nội dung bài pipe trong Angular 4 đến đây là hết rồi. Trong bài sau, chúng ta sẽ tìm hiểu về routing trong Angular 4.
