Những điều cần biết về Pipe trong Angular

Pipe trong Angular cho phép người dùng chuyển đổi dữ liệu trước khi nó hiện trong trình xem. Pipe tương tự như bộ lọc trong ngôn ngữ lập trình nhưng linh hoạt hơn và có thể được tùy biến để đáp ứng các nhu cầu cụ thể. Dưới đây là những điều bạn cần biết về cách dùng pipe trong ứng dụng Angular.

Pipe trong Angular là gì?

Pipe trong Angular là công cụ chuyển đổi dữ liệu khiến app trở nên năng động hơn. Chúng lấy một giá trị làm đầu vào và trả về một giá trị đã được chuyển đổi làm đầu ra. Chuyển đổi dữ liệu có thể đơn giản như định dạng ngày tháng, hoặc tiền tệ hay phức tạp như lọc hoặc phân loại danh sách các mục.

Bạn có thể dùng pipe trong các thành phần và mẫu Angular. Sử dụng Pipe dễ dàng và bạn có thể xâu chuỗi chúng để tạo các phép biến đổi phức tạp hơn.

Angular cung cấp sẵn một số pipe bao gồm DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, DecimalPipe, PercentPipe, JsonPipe, SlicePipe và AsyncPipe. Nó cũng cung cấp tính năng tạo pipe tùy biến.

Mỗi pipe Angular tích hợp triển khai một hàm độc đáo và có thể giúp bạn chuyển đổi dữ liệu.

DataPipe

DataPipe định dạng và hiện các biến ngày & tháng ở định dạng được chỉ định, xét theo ngôn ngữ của bạn. Không giống những framework khác cần package JavaScript để định dạng ngày & tháng, Angular dùng DataPipe. Để dùng DatePipe trong ứng dụng, thêm biểu tượng pipe (|) được theo sau bởi date và bất kỳ tham số bổ sung khác.

Ví dụ:

<p>Today's date is {{ currentDate | date }}</p>

Ở ví dụ này, bạn chuyển biến currentDate qua DataPipe, sau đó định dạng nó theo định dạng ngày tháng mặc định. Bạn xác định biến currentDate trong file TypeScript ở thành phần của bạn.

Ví dụ:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentDate: any = new Date();
}

Bạn cũng có thể chuyển các tham số bổ sung sang DataPipe để tùy biến kết quả:

<p>Today's date is {{ currentDate | date:'shortDate' }}</p>

Khối code trên đã chuyển tham số shortDate sang DatePipe. Điều này báo cho DatePipe biết định dạng ngày tháng theo kiểu ngắn. Bên cạnh tham số shortDate, bạn có thể cấu hình DatePipe bằng các tham số khác nhau, bao gồm z, longDate và các định dạng ngày tháng tùy biến như dd/MM/YY.

UpperCasePipe và LowerCasePipe

UpperCasePipe & LowerCasePipe biến đổi văn bản của bạn. Bạn có thể chuyển đổi text sang chữ viết hoa bằng UpperCasePipe và viết thường bằng LowerCasePipe.

Để dùng UpperCasePipe và LowerCasePipe, thêm biểu tượng pipe (|) được theo sau bởi lowercase để dùng LowerCasePipe hoặc upercase để dùng UperCasePipe.

Dưới đây là ví dụ về cách dùng UpperCasePipe và LowerCasePipe:

<p>{{ message | uppercase}}</p>
<p>{{ message | lowercase}}</p>

CurrencyPipe

Dùng CurrencyPipe, bạn có thể định dạng số sang đơn vị tiền tệ trong ứng dụng. CurrencyPipe định dạng số theo ngôn ngữ của bạn. Để định dạng số bằng CurrencyPipe, dùng biểu tượng pipe được theo sau bởi currency.

Ví dụ:

<p>{{ number | currency }}</p>

Ở ví dụ này, CurrencyPipe chuyển đổi biến số sang dạng tiền tệ. Mặc định, CurrencyPipe chuyển đổi các biến sang đô la. Để thay đổi điều này, bạn có thể cấu hình CurrencyPipe để chuyển đổi sang tiền tệ khác bằng cách chuyển các tham số bổ sung.

Ví dụ:

<p>{{ number | currency: 'GBP' }}</p>

Tại đây, bạn chuyển tham số GBP sang CurrencyPipe. Điều này đảm bảo biến number chuyển đổi sang đơn vị tiền tệ bảng Anh.

DecimalPipe và PercentPipe

DecimalPipe chuyển đổi các số sang số thập phân, còn PercentPipe chuyển đổi số sang dạng phần trăm.

Để dùng DecimalPipe, dùng biểu tượng pipe theo sau là number và các tham số bổ sung. Để dùng PercentPipe, thực hiện tương tự nhưng thay number bằng percent và không có tham số bổ sung.

Ví dụ:

<p>{{ number | number: '1.2-3' }}</p>
<p>{{ number | percent }}</p>

Tham số bổ sung được chuyển tới DecimalPipe, kiểm soát số nguyên và phân số được hiển thị. Tham số 1 xác định rằng phải có ít nhất một chữ số nguyên. Để so sánh, tham số 2.3 cho biết có ít nhất 2 và tối đa 3 chữ số phân số.

JsonPipe

JsonPipe là một pipe có sẵn, chuyển đổi dữ liệu thành định dạng chuỗi JSON. Nó chủ yếu được dùng cho mục đích gỡ lỗi. Bạn có thể dùng JsonPipe cho cả các đối tượng và mảng.

Cú pháp:

{{ expression | json }}

Tại đây, expression là dữ liệu bạn muốn chuyển đổi sang định dạng JSON. Toán tử pipe (|) áp dụng JsonPipe cho biểu thức này

Ví dụ, xác định một đối tượng và một mảng trong thành phần của bạn:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})

export class AppComponent {
  user: data = {
    firstname: "John",
    lastname: "Doe",
  };

  profiles: data[] = [
    {
      firstname: "John",
      lastname: "Doe",
    },
    {
      firstname: "Peter",
      lastname: "Parker",
    },
  ];
}

interface data {
  firstname: string;
  lastname: string;
}

Khối code trên định nghĩa đối tượng user và mảng profiles. Giờ bạn có thể dùng JsonPipe để chuyển đổi đối tượng và mảng sang JSON.

<p>{{ user | json}}</p>
<p>{{ profiles | json}}</p>

Tại đây, JsonPipe sẽ chuyển đổi đối tượng user và mảng profiles sang dạng chuỗi JSON mà bạn có thể nhanh chóng kiểm tra trong template xuyên suốt quá trình phát triển hoặc gỡ lỗi.

SlicePipe

SlicePipe tương tự như phương thức slice() của JavaScript. SlicePipe định dạng mảng hoặc chuỗi bằng cách truy xuất các thành phần để tạo mảng hoặc chuỗi mới.

Để dùng SlicePipe, bạn dùng biểu tượng pipe, sau đó là slice và 2 tham số, chỉ mục bắt đầu và kết thúc. Chỉ mục bắt đầu là vị trí trong mảng hoặc chuỗi tại nơi pipe bắt đầu truy xuất các thành phần, còn chỉ mục kết thúc là nơi pipe sẽ dùng truy xuất các thành phần.

Ví dụ về cách dùng SlicePipe:

<p>{{ string | slice: 0:2}}</p>
<p>{{ array | slice: 0:1}}</p>

Ở ví dụ này, SlicePipe sẽ truy xuất hai thành phần đầu tiên từ biến string, phần tử ở index 0 và ở index 1. Hơn nữa, nó sẽ truy xuất thành phần đầu tiên từ biến array. SlicePipe hữu ích khi bạn chỉ muốn hiện một phần dữ liệu trong mẫu.

AsyncPipe

AsyncPipe là một pipe Angular được tích hợp, tự động đăng ký và bỏ đăng ký tới một Observale hoặc Promise. Nó trả về giá trị mới nhất được phát ra bởi Observable hoặc Promise.

Cú pháp để dùng AsyncPipe như sau:

{{ expression | async }}

Tại đây, biểu thức là Observable hoặc Promise mà bạn muốn đăng ký. Ví dụ:

let numbers = of(1, 2, 3, 4, 5);

Bạn có thể dùng AsyncPipe để đăng ký Observable và hiện giá trị được phát mới nhất như sau:

<p>{{ numbers | async }}</p>

Khối code này sẽ xuất số mới nhất từ Observable. AsyncPipe rất hữu ích khi xử lý các hoạt động không đồng bộ trong template. Nó tự động đăng ký Observable hoặc Promise khi thành phần khởi tạo và bỏ đăng ký khi nó bị phá hủy.

Xâu chuỗi Pipe trong Angular

Bạn có thể xâu chuỗi các pipe lại với nhau để triển khai nhiều biến đổi trong một biểu thức. Xâu chuỗi pipe đơn giản như việc dùng nhiều toán tử pipe (|) trong một biểu thức. Đầu ra của mỗi pipe trở thành đầu vào cho pipe tiếp theo.

Cú pháp cơ bản:

<p>{{ expression | pipe1 | pipe2 | ... }}</p>

Ví dụ, bạn có thể biến đổi đối tượng ngày tháng thành một chuỗi bằng DatePipe, sau đó chuyển đổi chuỗi đó sang chữ viết hoa bằng UpperCasePipe.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}</p>

Pipe là một tính năng mạnh mẽ trong Angular, cho phép bạn biến đổi dữ liệu trước khi nó hiện trong cửa sổ xem. Hi vọng qua bài viết, bạn biết cách dùng Pipe trong Angular hiệu quả.