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

各Angularコンポーネントには特定の目的と責任がある。

import { Component, OnInit } from '@angular/core';
 
@Component({ // @Component()デコレーター...次のクラスがコンポーネントであることを示している。
  selector: 'app-product-alerts',　// Angularコンポーネントに付ける名前です。 
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
 
export class ProductAlertsComponent implements OnInit { // クラス
 
 　// @Inputデコレーター...プロパティ値がコンポーネントの親から渡される
　 @Input() product;　// プロパティ
  constructor() { }
 
  ngOnInit() {
  }
 
}

①product-alerts.component.ts　
selector: 'app-product-alerts'　//Angureコンポーネントの名前
　…
export class ProductAlertsComponent implements OnInit {　//クラス名
  @Input() product; // インプットデコレーター付きのプロパティ
  constructor() { }

　↓

②product-list.component.html
  <app-product-alerts [product]="product">　//プロパティバインディング
  </app-product-alerts>