Angularのチュートリアルをちょいちょいカスタマイズしながら触っているところなので、覚書。

アイテムの情報を出すHTML

チュートリアルの中で、商品の情報を出すというサンプルがあります。

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>

</div>

ただ、このままだと該当するアイテムがない時にh2タグ以外何も表示されません。

アイテムがない時の表示にも対応する

らこさんのブログにちょうどいい記事がありましたので、それを試します。

<h2>Detail</h2>
<div *ngIf="product; then Detail; else NoItem">
</div>

<ng-template #Detail>
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>
</ng-template>

<ng-template #NoItem>
  <p>No such item</p>
</ng-template>

ng-templateでアイテムがある場合、ない場合それぞれのHTMLを定義し、*ngIfではthen / elseで呼び出すテンプレートを変えるだけです。

Tag: Angular8

Angular8でアイテムがある時・ない時のHTMLを出し分ける