Angular

Sử dụng Pipes trong Angular

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách tạo Pipes là như thế nào?

1. Pipes là gì

Chúng ta sử dụng Angular Pipes để định dạng lại kiểu hiển thị trên website. Ví dụ như kiểu ngày, tháng chúng ta muốn hiển thị theo kiểu MM-DD-YYYY (01-01-1983) cho người dùng.

2. Date Pipes là gì

Sử dụng để định dạng lại kiểu ngày tháng trên website.

Cú pháp

1

date_expression | date[:format]
  • date_expression là đối tượng ngày hoặc là một kiểu số.
  • data : tên của pipe sẽ được dùng để định dạng dữ liệu.
1
2
3

<h3>Using Date Pipe </h3>
<p>Unformatted date : { { toDate } } </p>     //Without pipe
<p>Formatted date :  { {toDate | date } } </p>   //With Date Pipe
  • Không có pipe ta sẽ nhận được là : Sun May 24 2020 19:30:12 GMT +0720 (Hong Kong)
  • Có pipe thì sẽ được hiển thị là : May 24 2020

3. UpperCasePipe & LowerCasePipe

Được sử dụng để viết hoa toàn bộ hoặc viết thường toàn bộ dữ liệu. Ví dụ như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    template:'<p>Unformatted : { { msg } } </p>
              <p>Uppercase : { { msg | uppercase } } </p>
              <p>Lowercase : { {msg | lowercase } } </p>'
})
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    msg: string= 'Welcome to Angular';
}

4. SlicePipe

Dùng để cắt một chuỗi từ vị trí muốn cắt đến vị trí kết thúc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template:'<p>Complete String :{ { msg } } </p>
              <p>Example 1 : { {msg | slice:11:20 } } </p>
              <p>Example 2 : { {msg | slice:-9 } } </p>'
})
 
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    msg: string= 'Welcome to Angular ';
}

5. DecimalPipe và NumberPipe

Dùng để format cho kiểu số và kiểu thập phân. Với cú pháp như sau:

1

number_expression | number[:digitInfo]
  • number_expression : số mà mình cần format.
  • number tên pipe.

6. PercentePipe

Định dạng số theo phần trăm.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    template:'<p>Unformatted :{ { per } } </p>
              <p>Example 1 : { {per | percent  } } </p>
              <p>Example 2 : { {per | percent:'1.2-2' } } </p>'
})
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    per: number= .7414;2';
}

7. CurrencyPipe

Định dạng để sử dụng cho tiền tệ như USD, hay VNĐ.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template: '<p>Unformatted :{ { cur } } </p>
               <p>Example 1 :{ {cur | currency } } </p>
               <p>Example 2 :{ {cur | currency:'INR':true:'4.2-2' } } </p>'
})
 
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    cur: number= 175;
}

8. Video Demo

9. Source code

Sourcecode

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments