今回は前回の続きで、Angularの「Pipe」を自分で作ってみたいと思います。

まずは雛形をコマンドで生成します。

[cmd]
ng g pipe custom-pipe-sample
[/cmd]

手でファイルを作成することも可能ですが、コマンドで作成すると
app.module.tsにimport文が自動で追加されます。

次に、生成されたファイルを編集します。
custom-pipe-sample.ts

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

@Pipe({
  name: 'customPipeSample'
})
export class CustomPipeSamplePipe implements PipeTransform {

  transform(value: string): string {
    return value + " custom-pipe";
  }

}

※今回はただpipeに渡された文字列に、”custom-pipe”を追加するだけです。

最後に、app.component.htmlでpipeを使用します。

{{str}}<br>
{{str | customPipeSample}}

今回はただ文字列を追加するだけのものですが、
同じ処理の繰り返しなどpipeを使うと簡潔に書けるようになると思います。

 

【関連記事】
3分で構築するRuby on Rails開発環境
続・3分で構築するRuby on Rails開発環境～MySQL設定編～
フラットデザインとレスポンシブデザイン
「Cloudera World Tokyo 2014」に行ってきました
Code Avengers（コードアベンジャーズ）
paizaでスキルチェック ～オンラインハッカソンに挑戦～
そしてスーパープログラマーへ
Hackmeに挑戦！
Railsで作るAPI
Ruby on Rails -turnout-
Ruby on Rails -migration-
Windows 10にアップグレードしてみました
Windows 神モード
Ruby on rails -slim-
WindowsでVimを使う（１）
「Cloudera　World　Tokyo 2015」に行ってきました
Ruby on Rails -gitignore.io-
Windowsでパッケージ管理
プログラミング言語を武器に例えると
Vagrantで開発環境構築
ワンライナーでWebサーバ起動
Vim like in Chrome
mailcatcher – インストール編
mailcatcher – 設定編
mailcatcher – API編
tigを使ってみました
NodeSchoolに入学
Vim Bootstrapを使ってみる
ギットクエストやってみました
VIM Adventures -LEVEL 1-
VIM Adventures -LEVEL 2-
VIM Adventures -LEVEL 3-
Python -インストール編
Python -パッケージ管理
Python -dateutils-
Python -itertools-
Python -retry-
Python -argparse-
Angular -環境構築編-
Angular -Material-
Angular -loading-
Angular -Pipe-