クラスバインディング
クラスバインディングを使うと DOM 要素の CSS クラスの ON/OFF を切り替えることができます。
[class.クラス名]="True か False" と書くことで、特定の CSS クラスの有効・無効を切り替えます。
例えば次のように、入力フォームがあり、テキストボックスに文字を入力した時にボタンを有効にするようにしてみましょう。
文字を入力すると、ボタンが有効に変わります。
ここでは Bootstrap を使っています。Bootstrap の組込み方法について「Bootstrap を使う方法」をみてください。また、 キー入力に対応するところには「テンプレート参照変数」を使っています。
これを実現するコードは次の通りです。
<div class="container-fluid">
<form class="form-horizontal" style="margin-top:1em;">
<div class="form-group">
<label for="email" class="control-label col-sm-2" >Email:</label>
<div class="col-sm-3">
<input #email (keyup)="onKeyup(email.value)" type="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button
class="btn btn-primary"
[class.disabled]="isButtonDisabled"
>OK</button>
</div>
</div>
</form>
</div>
Bootstrap を使っているので見栄えはいいかわりに、少々コードが多く見えますが、 ポイントは [class.disabled]="isButtonDisabled" としているところだけです。
この isButtonDisabled というのはコンポーネントのプロパティで、keyup のハンドラにて、True/False を切り替えてます。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isButtonDisabled = true;
onKeyup(s:string){
console.log(s);
this.isButtonDisabled = !(s.length > 0);
}
}
複数のクラスを一度に ON/OFF する場合は、NgClass ディレクティブを使う方法があります。