Angularのデータバインディングを使ってみる

• コンポーネント(TS)からビュー(HTML)：コンポーネントで値の変更が行われ、変更された値をビューに伝える。
  •  バインディングの際は、補間バインディングの場合を除き[ ]括弧を使用する。

{{ title }}

<img [alt]="hero.name" [src]="heroImageUrl">

<app-hero-detail [hero]="currentHero"></app-hero-detail>

<div [ngClass]="{'special': isSpecial}"></div>

<div [class.special]="isSpecial">Special</div>

<button type="button" [style.color]="isSpecial ? 'red' : 'green'">

• ビュー(HTML)からコンポーネント(TS)：ビューで値の変更が行われ、変更された値をコンポーネントに伝える。
  • バインディングの際は、( )括弧を使用する。

<button type="button" (click)="onSave()">Save</button>

<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>

<div (myClick)="clicked=$event" clickable>click me</div>

• 双方向：ビューとコンポーネントで値の変更は相互に伝えられ、値は同期された状態となる。
  • バインディングの際は、[()]括弧を使用する。

<input [(ngModel)]="name">

{{ title }}

export class AppComponent {
   title = "アイソルートブログ";
}

<button (click)="onClick()">画像変化</button>
<img [src]="imagePath">

export class AppComponent {
  imagePath: string = '../img/main_image.png';
  changeImage: boolean = false;
  onClick() {
    this.changeImage = !this.changeImage;
    this.imagePath = this.changeImage === true ? '../img/main_image.png' : '../../img/alter_image.png';
  }
}

<button (click)="onSelect()">色変化</button>
<p [class.success]="changeColor">成功</p>

.success {
  color: green;
}

export class AppComponent {
  changeColor: boolean = false;
  onSelect() {
    this.changeColor = !this.changeColor;
  }
}

以下の例では、first, second, thirdというクラスがそれぞれがtrueの場合のみ適用されています。

<p [ngClass]="style">hoge</p>
<p [ngClass]="{'first': true,'second': false,'third': true}">hoge</p>

export class AppComponent {
  style = {first: true, second: false, third: true};
}

<p [style.display]="single">Hello!</p>
<p [style]="multiple">See you!</p>

export class AppComponent {
  single = 'none';
  multiple = {color: 'white', fontSize: '10px'};
}

<button (click)="onClick()">選択</button>

export class AppComponent {
  onClick() {
    console.log('クリックされました。');
  }
}

<input type='text' [(ngModel)]='name'>
<p>{{ name }}</p>

import { FormsModule }   from '@angular/forms'; //追加

export class AppComponent {
  name: string;
}