Angular初心者なので、まずは基礎から考えてみる。
まずは、基礎としてバインディングを整理
TypeScript ➡︎ HTML
TypeScriptからHTMLへのバインディングの場合
{{ }}
以下のように書けばtest変数の値をHTMLで表示できます
{{test}}
ngModel
HTMLにこのように「[]」でngModelを設定すれば、TypeScriptからHTMLへのバインドができるようになる。
[(ngModel)]="product.id"
productオブジェクトのidの値が設定されます。
違う例で見てみると
<input type="text" [(ngModel)]="product.name" placeholder="商品名">
という形でinputタグで修正できるようにする。
そうすると修正した際にproductの中身も変更される。
つまり双方向でのバインディングとなる
HTML ➡︎ TypeScript
逆に、このように「()」でイベントを書けばHTMLからTypeScriptのバインドができる。
(click)="save()"
この場合、クリックでsaveメソッドが呼び出されます。
*ngIf
*ngIf="product"
productにデータがある場合に実行できるようにする
*ngFor
*ngFor="let product of products"
productsのデータ数分ループする。
1行1行のデータはproductに入る。
class
[class.selected]="a === b"
aとbが同じだった場合にselectedというクラスを付与する
