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テンプレート …UI。product-list.component.html

* コンポーネント固有スタイル …ルック・アンド・フィール(コンポーネントCSS)。product-list.component.css