概要
Angularにはディレクティブと呼ばれる、テンプレート内の要素に対して振る舞いや見た目を追加する仕組みがある。
ディレクティブには主に以下の2種類が存在する：
- 属性ディレクティブ：要素の「見た目」や「振る舞い」を変更する
- 構造ディレクティブ：要素の「構造」（DOMの追加・削除）を制御する
例：
- 属性ディレクティブ：
ngClass,ngStyle, カスタム属性ディレクティブ- 構造ディレクティブ：
*ngIf,*ngFor,*ngSwitch
構造ディレクティブは、別記事で解説している（Angular 構造ディレクティブについて）。
このドキュメントでは「属性ディレクティブ」に焦点を当てて解説する。
属性ディレクティブとは？
属性ディレクティブは、既存の要素に「属性として追加される形」で利用される。
HTML要素やコンポーネントの見た目、動作、状態などを動的に制御するのが主な役割。
よく使われる組み込み属性ディレクティブ
| ディレクティブ | 説明 |
|---|---|
ngClass |
クラスを動的に付与する |
ngStyle |
スタイルを動的に付与する |
ngModel |
双方向データバインディング（FormsModuleが必要） |
<!-- ngClassの例 -->
<!-- isActive が true の場合、<div> に active クラスが付与される -->
<!-- isActive が false の場合、active クラスは付与されない -->
<div [ngClass]="{ 'active': isActive }">ボックス</div>
<!-- ngStyleの例 -->
<!-- isError が true の場合、テキストの色が赤（color: red）になる -->
<!-- isError が false の場合、テキストの色が黒（color: black）になる -->
<div [ngStyle]="{ 'color': isError ? 'red' : 'black' }">メッセージ</div>
<!-- ngModelの例 -->
<!-- ユーザーが <input> に文字を入力すると、自動的に userName に反映される -->
<!-- 同時に、userName の値が変更されれば、<input> の内容も更新される -->
<input [(ngModel)]="userName" placeholder="名前を入力">
<p>こんにちは、{{ userName }} さん！</p>
カスタム属性ディレクティブの作成
自作の属性ディレクティブも作成可能。
以下は、要素の背景色を固定で黄色に変更するカスタム属性ディレクティブ。
highlight.directive.ts
import { Directive, ElementRef, OnInit } from '@angular/core';
// @Directive デコレーターでこのクラスがディレクティブであることを指定
@Directive({
selector: '[appHighlight]' // テンプレートで使用する属性名（例: <p appHighlight>）
})
export class HighlightDirective implements OnInit {
// コンストラクタで ElementRef を注入（このディレクティブが適用される要素への参照）
constructor(private el: ElementRef) {}
// ngOnInit は初期化時に呼ばれるライフサイクルフック
ngOnInit() {
// 要素の背景色を直接操作して黄色に設定
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}
<!-- この段落に appHighlight ディレクティブを適用 -->
<p appHighlight>この段落の背景が黄色になります</p>
このコードは、カスタムディレクティブHighlightDirectiveを作成している。
appHighlight属性をHTML要素に付けると、このディレクティブが適用されます。
ngOnInitライフサイクルフックで、ElementRefを使って要素の背景色を黄色に変更します。これにより、<p appHighlight>タグの背景が黄色になります。
まとめ
Angularの属性ディレクティブは、要素の見た目や振る舞いを動的に変更する仕組みで、代表的なものにngClassやngStyleがある。自作の属性ディレクティブも作成可能である。