Custom Pipes trong Angular 7

Trong bài viết này chúng ta sẽ tìm hiểu về cách để custom pipe trong Angular (Phiên bản mình dùng để demo là Angular 7, trong Angular JS gọi là filter)

Pipe được sử dụng để chuyển đổi và định dạng lại dữ liệu hiển thị ngoài template (HTML).

Angular cung cấp cho chúng ta các pipes có sẵn như sau:

Cú pháp sử dụng Pipes:

{{ exp | myPipe }}

Kết quả của biểu thức sẽ được xử lý qua hàm transform().

Ở bài viết này mình sẽ sử dụng một vài ví dụ để các bạn có thể hiểu các chúng ta tạo ra pipe như thế nào và ứng dụng cụ thể của nó:

Cách mà chúng ta khai báo Pipe trong file app module(nó cũng tương tự như việc khai báo component hay là directive):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ChangeStrPipe } from './change-str.pipe.ts';

@NgModule({
  declarations: [
    AppComponent,
    ChangeStrPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Trong khi khởi tạo 1 Pipe chúng ta cần chú ý:
Phải implement PipeTransform
Trong PipeTransform có phương thức tranform() là hàm xử lý dữ liệu mà ta có thể override


Ví dụ 1: Bắt đầu với ví dụ đơn giản, đó là chúng ta sẽ chuyển đổi dữ liệu là string ban đầu thành chuỗi có tiền tố là htm

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'changeStrPipe'})
export class ChangeStrPipe implements PipeTransform {
  transform(value: string): string {
    let newStr: string = 'htm' + value;
    return newStr;
  }
}

Ngoài template chúng ta sử dụng:

{{ user.fullName | changeStrInput }}

Ví dụ 2: Nâng cao hơn 1 chút khi chúng ta sử dụng có tham số truyền vào:

@Pipe({name: 'changeStrPipe'})
export class ChangeStrPipe implements PipeTransform {
  transform(value: string, before: string, after: string): string {
    let newStr = `${before} ${value} ${after}`;
    return newStr;
  }
}

Khi đó ở template sẽ là:

{{ user.fullName | changeStrPipe:"Mr.":"handsome" }}

Ví dụ 3: Khi bạn get hết data từ api về và bạn muốn search 1 item nào đó trong đống data đó:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterByName'
})
export class FilterByNamePipe implements PipeTransform {

  transform(items: Array<any>, searchQuery: string = ''): any {
    if (searchQuery === '') {
      return items;
    }
    return items.filter(item => {
      return (
        item.name.first.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1
        ||
        item.name.last.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1
      );
    });
  }
}

Khi đó ở template sử dụng:

<div class="users-page__search">
    <input type="text" [(ngModel)]="searchQuery" placeholder="search users by name">
</div>
<app-user-item 
    *ngFor="let user of users | filterByName: searchQuery">
</app-user-item>

Tài liệu tham khảo:
https://angular.io/api?type=pipe

All Rights Reserved