Angular でクラスを追加

1. Angular に静的または動的クラスを追加する
2. Angular で NgClass を使用する

Angular に静的クラスまたは動的クラスを追加するための className や ngClass などのさまざまなメソッドを紹介します。また、Angular でクラスを切り替える方法も紹介します。

Angular に静的または動的クラスを追加する

クラスは、Web アプリケーションの主要部分です。クラス名に基づいて、さまざまな機能のスタイルを設定して実行します。

シングルページアプリケーションフレームワークのように、Angular はデータバインディングに関しては輝いています。対応する JavaScript オブジェクトに変更があった場合、DOM 要素は自動的に更新されます。

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

Angular で新しいアプリケーションを作成したら、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

通常 HTML にクラス名を追加するのと同じように、クラス名を任意の HTML 要素にバインドできます。唯一の違いは、以下に示すように、class の代わりに className を使用することです。

# angular
<div [className]="'my-class'"></div>

上記のコードは、それが div 要素に割り当てられた静的クラスのみであることを示しています。次に、className を使用して動的クラスを追加する方法について説明します。

以下に示すように、条件に基づいて要素にクラスを変更または追加できます。

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

条件 loggedIn が true の場合、クラス logged-class が割り当てられます。条件が false の場合、クラス my-class が割り当てられます。

以下に示すように、実行時にクラス名を作成することもできます。

# angular
<div [className]="'class' + myValue"></div>

上記の例は、文字列 class と値 myValue を追加することを示しています。これらは実行時に何でもかまいませんが、クラス名を作成します。

Angular で NgClass を使用する

ngClass は、単なる構文糖衣であるため、コードをより合理的に見せるために使用されるディレクティブです。便利で短く使えます。

ngClass は非常に用途が広いです。それでは、以下に示すように、ngClass をどのように使用できるかを確認しましょう。

# angular
<div [ngClass]="'myclass'"></div>

ngClass は、以下に示すように、複数のクラス名を追加するのにも役立ちます。

# angular
<div [ngClass]="['my-class','second-class']"></div>

以下に示すように、条件を使用してクラス名を割り当て、条件に基づいてクラス名を切り替えることもできます。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

以下に示すように、2つの異なる条件に基づいて複数のクラスを割り当てることもできます。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

以下に示すように、2つの異なる条件を使用することもできます。

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

したがって、このようにして、ClassName と ngClass を使用して、条件に基づいてクラスを簡単に割り当てることができます。また、Angular ディレクティブを使用して、動的、静的、または複数のクラスを追加する方法も学びました。