今回はAngularの「Pipe」を使ってみたいと思います。

Pipeとは画面に表示するために取得したデータなどを
見やすい形に変換して画面に表示することができる機能です。

■pipes

https://angular.io/guide/pipes
pipeはビルドインされているのでインストールは必要ありません。
ビルドインされているPipeはこちらで確認できます。

■API List

https://angular.io/api?type=pipe

今回は「SlicePipe」を使ってみたいと思います。
まず、app.module.tsにSlicePipeのコンポーネントを追記します。

    import { SlicePipe } from '@angular/common';

次に、app.component.tsに画面に表示する文字列を初期化しておきます。

export class AppComponent {
　　　　 str: string;
　　　   ngOnInit(){
                this.str = 'Hello World';
        }
}

最後に、app.component.htmlで文字列を表示します。

{{str}}<br>
{{str | slice:0:5}}

最初の文字列はそのまま出力していて、その次の文字列は
「Hello」だけ出力するようにしてあります。

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-