Angular 2テンプレートの`let-*`解説

Angular 2テンプレートにおけるlet-*の意味

Angular 2のテンプレートでは、let-*という構文を使用して、コンポーネントの入力プロパティやテンプレート変数を定義することができます。

基本的な使い方

<my-component [inputProperty]="value" (event)="handleEvent($event)">
  <template let-item="item">
    {{ item.name }}
  </template>
</my-component>

• {{ item.name }}
  テンプレート変数itemのnameプロパティを表示します。
• <template let-item="item">
  テンプレート変数itemを定義します。
• (event)="handleEvent($event)"
  コンポーネントのイベントeventをハンドラー関数handleEventにバインドします。
• [inputProperty]="value"
  コンポーネントのinputPropertyにvalueをバインドします。

具体的な使用例

Primengのデータテーブルでは、let-*を使って各行のデータをテンプレート変数にバインドすることができます。

<p-dataTable [value]="data" [(selection)]="selectedItems">
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <td>{{ rowData.name }}</td>
    <td>{{ rowData.age }}</td>
  </ng-template>
</p-dataTable>

• let-rowIndex
  行のインデックスをバインドします。
• let-rowData
  各行のデータオブジェクトをバインドします。

<my-component [inputProperty]="value" (event)="handleEvent($event)">
  <template let-item="item">
    {{ item.name }}
  </template>
</my-component>

Primengのデータテーブルでの使用

<p-dataTable [value]="data" [(selection)]="selectedItems">
  <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <td>{{ rowData.name }}</td>
    <td>{{ rowData.age }}</td>
  </ng-template>
</p-dataTable>

さらに具体的な例

<app-product-list [products]="products">
  <ng-template let-product="product">
    <div class="product-item">
      <h2>{{ product.name }}</h2>
      <p>{{ product.description }}</p>
      <button (click)="addToCart(product)">カートに追加</button>
    </div>
  </ng-template>
</app-product-list>

• <button (click)="addToCart(product)">カートに追加</button>
  商品をカートに追加するボタンを定義します。
• {{ product.name }}、{{ product.description }}
  商品の情報を表示します。
• let-product="product"
  各商品のデータをバインドします。

let-*の代替方法

Angular 2テンプレートにおけるlet-*は、テンプレート変数を定義するための便利な構文です。しかし、場合によっては、他の方法を使用することもできます。

インラインテンプレート

インラインテンプレートを使用すると、コンポーネントのテンプレートを直接定義することができます。この場合、テンプレート変数を直接定義することができます。

@Component({
  selector: 'my-component',
  template: `
    <div *ngFor="let item of items">
      {{ item.name }}
    </div>
  `
})
export class MyComponent {
  items: any[] = [];
}

ng-templateディレクティブ

ng-templateディレクティブを使用すると、テンプレートを再利用することができます。この場合、テンプレート変数を定義し、他のテンプレートから呼び出すことができます。

<ng-template let-item="item">
  {{ item.name }}
</ng-template>

<div *ngFor="let item of items">
  <ng-container *ngTemplateOutlet="templateContext let item=item"></ng-container>
</div>

ngIfディレクティブ

ngIfディレクティブを使用して、条件に基づいてテンプレートを表示または非表示にすることができます。この場合、テンプレート変数を定義し、条件が満たされた場合に表示することができます。

<div *ngIf="item; let item">
  {{ item.name }}
</div>