Angular の要素にクラスを追加する

1. Angular 4 なしでクラスを追加する
2. Angular 4 の ClassName プロパティを使用して要素にクラスを追加する
3. Angular 4 の NgClass ディレクティブを使用して要素にクラスを追加する

Angular 4 は、Web アプリケーションを構築するためのフレームワークです。TypeScript に基づいて構築されており、Angular 2 よりも強力で柔軟性のある多くの機能を備えています。

Angular 4 をより強力にする機能の 1つは、要素にクラスを追加するという概念です。

Angular 4 の要素にクラスを追加する最も簡単な方法は、NgClass ディレクティブで HTML 属性セレクター構文を使用することです。

この構文は任意の HTML タグで使用でき、一度に複数のクラスを適用できます。その後、他のディレクティブやスタイルシートルールで必要に応じて適用できます。

この記事では、Angular 4 の要素にクラスを追加する方法について詳しく説明します。

その前に、従来の JavaScript を使用してクラスを割り当てる方法と、Angular でクラスを割り当てる方法を確認します。

Angular 4 なしでクラスを追加する

人気のある JavaScript ライブラリ Angular は、NgClass ディレクティブを使用してこれを行う方法を提供します。このディレクティブを使用すると、要素にクラスを簡単に動的に追加および削除できます。

ただし、Angular を使用していない場合は、JavaScript を使用してこのタスクを実行する方法が他にもいくつかあります。

addClass と呼ばれる jQuery プラグインを使用すると、jQuery で初期化されている限り、任意の要素にクラスを簡単に追加できます。JavaScript で .setAttribute() メソッドを使用して、操作対象の DOM ノードで className プロパティを設定することもできます。

Angular 4 の ClassName プロパティを使用して要素にクラスを追加する

Angular 4 の className プロパティに直接バインドするには、ClassName プロパティを使用します。セレクターの後に角かっこを使用するか、ドット構文 ClassName によってアクセスされる、任意の要素にクラスを追加します。

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

isActive が true を返す場合、active クラスが追加されます。それ以外の場合、非アクティブは同じままです。

Angular 4 の NgClass ディレクティブを使用して要素にクラスを追加する

NgClass ディレクティブには多くのユースケースがあります。最も一般的なものの 1つは、ユーザーが要素をクリックしたときに要素にクラスを追加することです。

NgClass ディレクティブを使用すると、特定の条件に基づいて要素にクラスを追加できます。たとえば、ユーザーがコンポーネントをクリックすると、その要素にアクティブなクラスを追加できます。

NgClass ディレクティブは、Angular アプリケーションの要素にクラスを動的に追加および削除できるため便利です。さらに、ディレクティブ自体は適応性が高く、入力に基づいてさまざまなことを行います。

たとえば、NgClass を使用して静的クラスを割り当てたいとします。その構文について説明しましょう。

<div [ngClass]="'Class-Name'">/div>

NgClass は、多数の静的クラス名を同時に割り当てることもできます。

<div [ngClass]="['Class-Name', 'other-class']">/div>

Angular 4 の要素にクラスを追加する完全な例

HTML コード：

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

CSS コード：

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

TypeScript コード：

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

上記の例のライブデモンストレーションを確認するには、こちらをクリックしてください。