Angular入門_はじめてのアプリ

<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
  <h3>
    {{product.name}}
  </h3>
</div>

<div *ngFor="let product of products">   // productsリストをproductという変数に当てはめる
  <h3>
    {{product.name}} // プロパティの値をテキストとしてレンダリングします
  </h3>
</div>

[]でhtmnlタグのプロパティをバインディングできる

<h2>Products</h2>
<div *ngFor="let product of products">
  <h3>
    <a [title]="product.name + ' details'"> //"~"の部分はバインディングしている。
                                            // 文字列だけなら<a [title]="'details'"> となる
    {{product.name}}
    </a>
  </h3>
</div>

  <p *ngIf="product.description">
    Description:{{product.description}}
  </p>

  <button (click)="share()">
    share
  </button>

* コンポーネントクラス product-list.component.ts
* HTMLテンプレート product-list.component.html
* コンポーネント固有スタイル product-list.component.css