Pluginで自動生成されたタグに属性を付与する。

普段実務ではAngularを主に使っているのですが、本日悩んだのでメモしておきます。
プラグインを使用した際にaタグにtarget="_blank"されていなかったので付けてみました。

コードはこちら codeSandBox

# TS側説明

import { Component, ElementRef } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  constructor(private el: ElementRef) {}
  ngOnInit() {
    const elm = this.el.nativeElement.querySelector(".items");
    const tag = elm.getElementsByTagName("a");
    setTimeout(() => {
      for (let i = 0; i < tag.length; i++) {
        tag[i].setAttribute("target", "_blank");
      }
    }, 2000);
  }
}

まずElementRefをインポートします。これはDOMにアクセスするクラスになります。
ElementRef.nativeElementとすることでネイティブのDOMを取得しています。

実務で起こった現象としては祖先要素より下はプラグイン側で生成されていたのでquerySelectorでitemsを指定しました。
itemsの中のaタグを取得する為getElementsByTagName("a")を書き加えて、
複数のaタグが含まれているそれらの配列をfor分で回します。
setAttributeでtarget="_blank"を付与して完成です。
しかし、今回プラグイン側でaタグを生成していたのでsetTimeOutでタイミングをずらしそれらの指示を与えました。

# まとめ

もっときれいにかける気がしていたのですが、時間の都合上断念してネイティブのDOM操作をしました。
工数とキレイな実装というものの二つを得るにはもうちょっとお勉強が必要なようです。
もっと良い方法を思いついた人がいたらTwitterで是非とも教えてください。