Angularのカスタムディレクティブ

ディレクティブを使うと、HTMLを拡張できます。このレッスンでは、カスタムディレクティブとその作成方法について学びます。

ディレクティブとは

ディレクティブは、DOM要素の外観や動作を変更します。Angularには、*ngIfや*ngForなどの組み込みディレクティブがあります。

ディレクティブの種類

• コンポーネントディレクティブ
• 属性ディレクティブ - 外観や動作を変更します
• 構造ディレクティブ - レイアウトを変更します（*ngIfなど）

属性ディレクティブを作成する

Angular CLIを使ってディレクティブを作成します。

ng generate directive highlight

ng generate directive highlight

ディレクティブを適用する

テンプレートでディレクティブを属性として使います。

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

ディレクティブのロジック

ディレクティブには、DOM要素を変更するロジックが含まれます。たとえば、背景色を動的に設定できます。

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

@HostListenerデコレーター

@HostListenerを使うと、ディレクティブが適用された要素のイベントに応答できます。

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

ディレクティブでの@Input()

@Input()を使うと、テンプレートからディレクティブにデータを渡せます。

@Input() defaultColor: string;

まとめ

カスタムディレクティブを作成してAngularアプリを拡張する方法を学びました。よくできました。