[Angular] TAB押下時の制御をしたいからDOMに直接イベントを登録する

やりたかったこと

どうしてもTABの制御をしたかったため、DOMに対してイベントを登録する必要があった。

やり方

  constructor (
    private elementRef: ElementRef,
  ) {}

  ngAfterViewInit() {
    this.elementRef.nativeElement.querySelectorAll('selector').forEach((element: Element) => {
      element.addEventListener('keydown', this.onTab.bind(this));
    });
  }

  private onTab(event) {
    if (event.key === 'Tab' || event.code === 'Tab') {
      event.preventDefault();
      // 制御
    }
  }

ポイント

• this.onTab.bind(this)で値をバインディングする
• preventDefault()で動作を抑制する

参考