*ngFor で指定回数繰り返し処理

Angular の *ngFor は *ngFor="let n of ['a', 'b']" のように配列のループはできるが、 Vue.js の v-for のように指定回数のループもできるディレクティブが用意されていない。
v-for="n in 4" 相当のことを Angular でやりたかったので、パイプを使って実現してみた。

パイプ

実装

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

@Pipe({
  name: 'range'
})
export class RangePipe implements PipeTransform {

  transform(value: number): Array<number> {
    return Array(value);
  }
}

説明

これは引数に与えられた長さを持つ配列を返すパイプである。
*ngFor="let n of 4 | range" のように使う。
上記の例では、4 | range で長さ4の配列ができ、*ngFor は4回実行されるといった寸法だ。

今回は指定回数ループさせるためだけを考えている。
そのため、例えば

<span v-for="n in 4">{{ n }}</span>

と同等のことするには以下のように index を使う必要がある。

<span *ngFor="let n of 4 | range; index as i">{{ i + 1 }}</span>

多少長いが、標準的な機能で完結しているのでひとまずこれでいいかなと思っている。
もっとスマートな実装方法あれば教えて欲しい！

---

パイプの生成もAngular CLIのコマンドひとつで簡単だし最高