41. カスタム属性ディレクティブ — 要素に振る舞いを足す

属性ディレクティブは、既存の要素に振る舞いを後付けする部品で、@Directive デコレータで自作できます。selector を [appHighlight] のように角カッコで書くと、<p appHighlight> のように属性として要素に付けられます。inject(ElementRef) で付けられた要素そのものを取得し、スタイルの変更などの操作ができます。

実務では「ホバーで背景色を変える」「表示時に自動でフォーカスする」「長い文字列を省略表示する」のように、いろいろな要素で使い回したい小さな振る舞いをディレクティブにします。コンポーネントに書くとその部品専用になってしまう処理を、属性1つでどの要素にも足せるのが強みです。

コンポーネントとの違いは、ディレクティブは自分のテンプレートを持たないことです。「新しい見た目のかたまりを作るならコンポーネント、既存の要素に振る舞いだけ足すならディレクティブ」と使い分けます。使う側の imports への登録が必要なのはコンポーネントと同じです。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Directive, ElementRef, inject } from '@angular/core';

// selector を [名前] にすると、属性として要素に付けられる
@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  // 自分が付けられた要素を取得する
  private el = inject(ElementRef);

  constructor() {
    this.el.nativeElement.style.backgroundColor = 'lightyellow';
  }
}

// 使う側: imports に HighlightDirective を登録して
// <p appHighlight>この段落が黄色になる</p> と属性のように付ける

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗