Angular 2 の ngClass で動的にクラス名を扱う方法

Angular 2 の ngClass 内で動的クラス名を扱う方法

動的クラス名の使用例

例えば、ボタンの状態に基づいてクラス名を変化させる場合、以下のコードのように記述できます。

<button [ngClass]="{'active': buttonActive}">ボタン</button>

このコードでは、buttonActive というプロパティが true の場合、ボタンに active クラスが割り当てられます。

複数のクラス名を動的に割り当てる場合、オブジェクトリテラルを使用できます。

<button [ngClass]="{'active': buttonActive, 'disabled': buttonDisabled}">ボタン</button>

このコードでは、buttonActive が true の場合は active クラス、buttonDisabled が true の場合は disabled クラスが割り当てられます。

テンプレート変数を使って、動的にクラス名を割り当てることもできます。

<button (click)="buttonClicked()">ボタン</button>

<script>
export class MyComponent {
  buttonActive = false;

  buttonClicked() {
    this.buttonActive = true;
  }
}
</script>

<button [ngClass]="['active', 'disabled']">ボタン</button>

このコードでは、ボタンに active クラスと disabled クラスが割り当てられます。

<button [ngClass]="getClass()">ボタン</button>

<script>
export class MyComponent {
  getClass() {
    if (this.buttonActive) {
      return ['active'];
    } else {
      return [];
    }
  }
}
</script>

このコードでは、getClass 関数によって返されたクラス名がボタンに割り当てられます。

ngClass のその他の機能

ngClass は、上記の他にもさまざまな機能を提供しています。詳細は、Angular の公式ドキュメントを参照してください。

<button [ngClass]="{'active': buttonActive}">ボタン</button>

<script>
export class MyComponent {
  buttonActive = false;

  buttonClicked() {
    this.buttonActive = true;
  }
}
</script>

別の例

<div [ngClass]="{'red': isRed, 'green': isGreen}">
  これはボックスです。
</div>

<script>
export class MyComponent {
  isRed = false;
  isGreen = false;

  changeColor() {
    this.isRed = !this.isRed;
    this.isGreen = !this.isGreen;
  }
}
</script>

このコードでは、changeColor 関数によって isRed と isGreen プロパティが切り替えられ、ボックスの色が赤と緑に切り替わります。

さらに別の例

<button [ngClass]="getClass()">ボタン</button>

<script>
export class MyComponent {
  getClass() {
    if (this.buttonActive) {
      return ['active'];
    } else {
      return [];
    }
  }
}
</script>

これらのコードはあくまでも例であり、さまざまな方法で ngClass を使用することができます。詳細は、Angular の公式ドキュメントを参照してください。

ngClass 以外で動的にクラス名を割り当てる方法

class 属性を使う

最も簡単な方法は、class 属性に直接クラス名を記述することです。

<button class="active">ボタン</button>

JavaScript を使って、動的に class 属性を変更することもできます。

<button id="button">ボタン</button>

<script>
const button = document.getElementById('button');

button.classList.add('active');
</script>

ライブラリを使う

<button [ngClass]="{'active': buttonActive}">ボタン</button>

<script>
import { Class } from 'angular-class';

export class MyComponent {
  buttonActive = false;

  buttonClicked() {
    this.buttonActive = true;
  }
}
</script>

このコードは、ngClass を使った例と同じですが、Angular-Class ライブラリを使っています。

どの方法を使うべきかは、状況によって異なります。簡単な場合であれば、class 属性を使うのが最も簡単です。複雑な場合や、さまざまな条件に基づいてクラス名を割り当てる必要がある場合は、ngClass やライブラリを使うのがおすすめです。