Tự tạo Pipes

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>

Xin vui lòng bình luận bài viết dưới đây có hữu ích hay không? Nếu có nhiều bài viết khác mà anh chưa kịp cập nhật các em có thể bình luận kèm link liên kết anh sẽ cập nhật bài viết của mình nhé.

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