Angular

Hướng dẫn tự tạo 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 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ển thị trên website. 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 tê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ụ converter 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> celcius : <input type="text" [(ngModel)]="celcius" /> 
       Fahrenheit : { { celcius | tempConverter:'F' } } </p>
    </div>
  </div>
</div>

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