Angularでのスタイルの動的変更

ディレクティブ ngClass と ngStyle を使用して式を要素に バインドすることができ、それによって スタイルを動的に変更できます。

コンポーネントクラスのプロパティ active を使って、テキストを非表示または表示する ようにしてみましょう：

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

そのためには、このプロパティを交互に オンまたはオフにする関数 toggle を記述します：

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

コンポーネントのCSSファイルで、クラスに 次のスタイルを設定します：

app/app.component.css.hidden {
  display: none;
}

コンポーネントのテンプレートでdivを作成し、 CSSクラス hidden を追加します。この クラスは、コンポーネントクラスのプロパティ active に応じてオンまたはオフになります：

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

また、クリックするとメソッド toggle が呼び出され、コンポーネントの表示/非表示を 切り替えるボタンも作成します：

app/app.component.html<button (click)="toggle()">
  toggle
</button>