42. host — 自分自身の要素へバインドする

コンポーネントやディレクティブのタグそのもの(ホスト要素)にクラスやイベントをバインドするには、@Component や @Directive の host プロパティを使います。'[class.active]': 'isActive()' と書けばホスト要素にクラスが条件付きで付き、'(click)': 'onClick()' と書けばホスト要素へのクリックがメソッドにつながります。

実務では、カードやチップのように「部品全体がクリックできて、選択中は見た目が変わる」部品でよく使います。テンプレート内の要素ではなく <app-card> というタグ自身に作用するのがポイントで、ディレクティブの場合は付けられた相手の要素に対して同じことができます。

書式は「'[バインド対象]': '式の文字列'」というオブジェクトで、値が文字列である点に慣れが必要です。以前は @HostBinding / @HostListener デコレータで同じことをしていましたが、現在は host プロパティにまとめて書くのが推奨されています。

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

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-toggle-chip',
  // host で <app-toggle-chip> 自身にクラスとイベントをバインドする
  host: {
    '[class.active]': 'isActive()',
    '(click)': 'toggle()',
  },
  template: '<span>通知を受け取る</span>',
  styles: [':host { cursor: pointer; } :host.active { background: gold; }'],
})
export class ToggleChipComponent {
  isActive = signal(false);

  toggle() {
    this.isActive.update((v) => !v); // 部品全体のクリックで切り替わる
  }
}

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

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

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