【Angular】*ngForとは

最近、Angularのテンプレートとして以下のサンプルコードを見たが、ぱっと分からず戸惑ったので少しまとめようと思う。

<h1>Users</h1>
<table>
  <tr><th>Id</th><th>Name</th><th>Email</th></tr>
  <tr *ngFor="let user of users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td>{{user.email}}</td>
  </tr>
</table>

抜粋「Angular入門 - リストを表示する」

https://www.tohoho-web.com/ex/angular.html#display-list

ngForとはテンプレート内で繰り返し処理を行うためのディレクティブです。 ngForではfor-of構文を用いて繰り返し処理を行える。

ついでに

ディレクティブって何やねん

テンプレートから実際のHTMLを作成する際に、HTMLの作成方法を指定するために使うもの。

  • コンポーネント
  • 構造ディレクティブ
    • DOMを追加したり削除したりすることでDOMのレイアウトを変更するディレクティブ。ngForやngIfがあるぞ。
  • 属性ディレクティブ
    • 既存のDOM要素の属性を変更することでDOM要素の見た目や振る舞いを変更するもの。ngModelがあるぞ。