Tambourine作業メモ

主にスキル習得のためにやった作業のメモ。他人には基本的に無用のものです。

Angularで遊ぶ(5) - パイプ

テンプレートの機能にパイプというものがあって、 シェルのパイプのような記法で表示する変数を整形できる。

表示のための機能はテンプレートに寄せたいと、そういうことなのかな。 わざわざ新しい記法を入れてまでやることなのかとか、そんな気がしないでもないけど。 以下は標準のパイプの例。自分で作るのはあとで出てくるらしいけど、よっぽどやらなくていい気がするね。

app.component.html

<h3>文字列の整形</h3>
<p>元の文字列:{{title}}</p>
<p>uppercase:{{title | uppercase}}</p>
<p>lowercase:{{title | lowercase}}</p>

<h3>JSONへの変換</h3>
<pre>{{user | json}}</pre>

<h3>部分文字列</h3>
<p>短歌:{{tanka}}</p>
<p>上の句:{{tanka | slice: 0: 17}}</p>
<p>下の句:{{tanka | slice: 17}}</p>

<h3>数字の桁区切り</h3>
<p>{{fileSize | number: '1.0-0'}}KB</p>

<h3>日付</h3>
<p>{{today | date: 'yMMdd'}}</p>

<h3>i18nPlural</h3>
<p>{{errs.length | i18nPlural: errmes}}</p>

app.component.ts

export class AppComponent {
  title = 'Vivian Maierを探して'

  user = {
    name: '羽生善治',
    age: 47,
  }

  tanka = 'ちはやぶるかもよもきかずたつたがはからくれなゐにみずくくるとは';

  fileSize = 12345678.987;

  today = new Date();

  errs = ['err1', 'err2'];
  errmes = {
    '=0': 'エラーはありません',
    '=1': 'エラーが発生しました',
    'other': '# 件のエラーが発生しました',
  };
}