Hướng dẫn tự tạo Pipes trong Angular

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 Customs Pipes là như thế nào?

1. Custom Pipes là gì

Chúng ta sử dụng Angular Pipes để định dạng lại kiểu hiểu thị trên webiste. Ngoài các kiểu có sẳn định dạng cho ngày, tiền tệ, số thì ta có thể tự viết một pipe riêng.

2. Tự tạo Pipes hiển thị nhiệt độ

  • Bước 1 : Chúng ta tạo file temp-convertor.pipe.ts

Cú pháp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Pipe, PipeTransform } from '@angular/core';
 
@pipe( {
    name: 'tempConverter'
} )
export class TempConverterPipe implements PipeTransform {
    transform(value: number, unit: string) {
        if(value && !isNaN(value)) {
            if (unit === 'C') {
                var temperature = (value - 32) /1.8 ;
                return temperature.toFixed(2);
            } else if (unit === 'F'){
                var temperature = (value * 1.8 ) + 32
                return temperature.toFixed(2);
            }
        }
        return;
    }
}

Đầu tiên chúng ta import thư viện Pipe vào

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

Tiếp theo ta định nghĩa annotation pipe và đặt tiên là tempConverter

1
2
3
@pipe( {
    name: 'tempConverter'
} )

Viết file converter nhiệt độ. File này sẽ implement PipeTransform

1
2
3
4
5
6
7
@pipe( {
    name: 'tempConverter'
} )
export class TempConverterPipe implements PipeTransform {
 
 
}
  • Bước 2 : Viết lại nghiệp vụ coverter trong method transform của PipeTransform
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export class TempConverterPipe implements PipeTransform {
 
    transform(value: number, unit: string) {
        if(value && !isNaN(value)) {
            if (unit === 'C') {
               var temperature = (value - 32) /1.8 ;
               return temperature.toFixed(2);
            } else if (unit === 'F'){
               var temperature = (value * 1.8 ) + 32
               return temperature.toFixed(2);
            }
        }
        return;
    }
 
}
  • Bước 3 : Khai báo TempConverterPipe trong AppModule
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 {TempConverterPipe} from './temp-convertor.pipe';
 
@NgModule({
    declarations: [AppComponent,TempConverterPipe],
    imports: [BrowserModule,FormsModule,HttpModule],
    bootstrap: [AppComponent]
})
export class AppModule { }
  • Bước 4 : Sử dụng Pipe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class='card'>
  <div class='card-header'>
    <p> </p>
  </div>
  <div class="card-body">
 
    <div class="row">
      <h3>Fahrenheit to Celsius </h3>
    </div>
    <div class="row">
      <p> Fahrenheit : <input type="text" [(ngModel)]="Fahrenheit" /> 
      Celsius : { { Fahrenheit | tempConverter:'C' } } </p>
    </div>
 
    <div class="row">
      <h3>Celsius to Fahrenheit </h3>
    </div>
    <div class="row">
      <p> celsius : <input type="text" [(ngModel)]="celcius" /> 
       Fahrenheit : { { celcius | tempConverter:'F' } } </p>
    </div>
  </div>
</div>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments