スタイル・バインディング
スタイル・バインディングでは、 [style.属性]="値" と書くことで、使うと DOM 要素の style の値を動的に設定することができます。
次の例は初期値は Hello という文字の色 (style.color) は green です。Red というボタンをクリックすると 'red' に、 Blue というボタンをクリックすると 'blue' に設定されます。
テンプレートは次の通り。
<h1><span [style.color]="fontColor">Hello</span></h1>
<div>
<button (click)="onClick('red')">Red</button>
<button (click)="onClick('blue')">Blue</button>
</div>
click イベントのイベントハンドラとして onClick という関数を指定していて、そこに色をハードコードしています。
コンポーネントは次の通り。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fontColor = 'green';
onClick(color: string){
this.fontColor = color;
}
}
onClick 関数にて、fontColor プロパティの値を書き換えると、それに応じて HTML のスタイルも書き換わります。