ステップバイステップ: Angularでカスタムパイプを作成する

Angularパイプはデータを入力として受け取り、目的の出力に変換します。たとえば、補間を使用すると、製品の名前が表示されます。次に、製品名を常に大文字で表示します。これは、パイプ大文字Angular使用します。

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
}

上記のコンポーネントでは、productName は大文字で表示されます。したがって、パイプは入力を受け取り、次に示すように目的の出力に変換します。

Angularライブラリには、次のような多くの組み込みパイプが用意されています。

• UpperCasePipe
• LowerCasePipe
• カレンシーパイプ
• PercentPipe
• DatePipe etc.

組み込みの通貨パイプをどのように使用できるかを見てみましょう。

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

コロンを使用してパイプにパラメータを渡すこともできます。以下に示すように、通貨パイプに入力を渡すことができます。

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Angularには多くの既定のパイプが用意されていますが、カスタム パイプを作成するときに要件がある場合があります。カスタムパイプの作成は、関数を作成するのと同じくらい簡単です。 文字列内の各単語の最初の文字を大文字にするパイプを作成するとします。

Consider below component,

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

このコンポーネントは、次のように名前を出力します。

次に、名前の各単語の最初の文字を大文字にします。そのためには、カスタムパイプを記述する必要があります。 パイプを作成するには、次の手順に従う必要があります。

1. Create a class
2. クラスに PipeTransform を実装します。
3. Implement transform function

したがって、次のリストに示すように、最初の文字を大文字にするパイプを作成できます。

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'firstcharcateruppercase' })
export class FirstCharacterUpperCase implements PipeTransform {
    transform(value: string, args: string[]): any {
        if (!value) {
            return value;
        }
        return value.replace(/\w\S*/g, function (str) {
            return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
        });
    }
}

ご覧のとおり、カスタムパイプは入力パラメータを受け取り、何らかの値を返す関数にすぎません。変換メソッド内にパイプのすべてのロジックを記述する必要があります。

​firstcharacteruppercaseパイプを使用するには、最初に以下に示すようにモジュールで宣言する必要があります。

import { FirstCharacterUpperCase } from './firstcharacteruppercase.pipe'
 
@NgModule({
    declarations: [
        AppComponent, FirstCharacterUpperCase
    ],

次に、コンポーネントで次のように使用できます。

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name | firstcharcateruppercase}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

これで、各名前の最初の文字が大文字で出力されます。

To summarize:

1. カスタムパイプはクラスで、@Pipeで装飾されています
2. デコレータの Name プロパティ@Pipeパイプの名前を定義します
3. PipeクラスはPipeTransformインターフェイスを実装する必要があります

変換メソッド内にパイプビジネスロジックを実装する必要があります。

パイプには2種類あります

1. ステートレス パイプ
2. ステートフル パイプ

上記で使用および作成したのはステートレス パイプです。これらは純粋な関数であり、入力を受け取り、変換された値を返します。

ステートフル パイプは実装が複雑で、変換するデータの状態を記憶します。通常、HTTP リクエストを作成し、応答を保存し、出力を表示します。組み込みの非同期パイプAngularステートフル パイプの例です。今後の投稿では、カスタムステートフルパイプを作成する方法を学びます。

Summary

この投稿では、Angularのパイプについて学びました。パイプは、入力データを目的の出力に変換します。Angularには多くのパイプが組み込まれています。ただし、カスタムパイプを記述するための要件がある場合があります。パイプには、ステートレス パイプとステートフル パイプの 2 種類があります。

この投稿が好きですか?

そして、これで完了です!この投稿が気に入ったら、共有してください。さらに、Infragistics Ignite UI for Angular Componentsをまだチェックしていない場合は、必ずチェックしてください。彼らは30 +の材料ベースのAngularコンポーネントを持っており、高速なWebアプリをより速くコーディングするのに役立ちます。