動的に生成するDOM要素にイベントバインディングを割り当てたい

Question

###前提・実現したいこと

動的に生成したinputにフォーカスが当たった時にアラートを出したいと考えて入るのですが、
呼び出されません...

templateで定義した、

<button (click)="addInput()">ADD</button>

は正しく呼び出すことができるのですが、
動的に生成した、

<input type="text" (focus)="focusFunc()" />

は動作しません。

ChoromeのDeveloper Toolsで確認したところ、以下のように
なっていました。

<!-- templateで定義 -->
<button _ngcontent-c0>ADD</button>

<!-- 動的に生成 -->
<input type="text" (focus)="focusFunc()" />

イベントバインディングがそのまま表示されてしまっているので、
DOMに追加後に何か処理を行わないといけないのでしょうか？
初歩的な質問で申し訳ないのですが、アドバイスをよろしくお願い致します。

###該当のソースコード

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

@Component({
  selector: 'app-root',
  template: `
   <div id="hoge">
     <button (click)="addInput()">ADD</button>
   </div>
  `,
})

export class AppComponent {
  addInput() {
    let elm = document.getElementById('hoge');
    let divElm = document.createElement('div');
    divElm.innerHTML = '<input type="text" (focus)="focusFunc()" />';
    elm.appendChild(divElm);
  }
  
  focusFunc() {
    alert('focus!!');
  }
}

Answer 1

そもそもDOMをいじらないためにフレームワークを使っているので、Angularに適したアプローチに変えてください。

アプローチ例:

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

@Component({
  selector: 'app-root',
  template: `
   <div id="hoge">
     <button (click)="addInput()">ADD</button>
     <input type="text" (focus)="focusFunc()" *ngFor="let input of inputArray">
   </div>
  `,
})

export class AppComponent {
  inputArray: boolean[];

  addInput() {
    inputArray.push(true);
  }

  focusFunc() {
    alert('focus!!');
  }
}

Answer 2

動的にの意味あいにNgIfがあてはまる場合は、
以下の回答ではいかがでしょうか？？
間違ってたらすいません。

import { Component } from '@angular/core';
import { NgIf } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  private show : boolean = false;

  private addInput():void{
    this.show = !this.show;
  }

  private focusFunc():void{
    alert('focus!');
  }

}

  <div class="hoge">
    <button (click)="addInput()">foo</button>
    <div *ngIf="show">
      <input
        type="text"
        (focus)="focusFunc()"
      >
     </div>

Comments

[wizz]

ご回答ありがとうございます。

１つお伺いしたいのですが、
<div *ngIf="show">...</div>
の要素は動的に生成するのでしょうか？

[ngna]

動的に生成される意味が、
clickのイベントでcreateElement( tagName )をし生成するですと、違うかもしれません。
また、動的に生成がparentElementのinnerHTMLを書き換えるも入るのであれば、
ngIfもあてはまるとと考えております。

https://github.com/angular/angular/blob/4.4.3/packages/common/src/directives/ng_if.ts#L10-L155

[wizz]

ご回答ありがとうございます。

私がやりたいと考えているのは、ngna様の仰る、
"clickのイベントでcreateElement( tagName )をし生成する"
のやり方です。

説明がわかりにくくて申し訳ありません。
createElementで生成した要素に設定する方法をご存知でしたらご教授いただけないでしょうか？

Answer 3

TypeScriptちょっとやったことないのでできるかわからないですけど、

addEventListenerを使ってみてはどうでしょう？

// 省略
let elm = document.getElementById('hoge');
let inputElm = document.createElement('input');

inputElm.addEventListener('focus',focusFunc,false);

elm.appendChild(inputElm);
// 省略

Comments

[wizz]

ご回答ありがとうございます。

ご提案して頂いた方法を試してみましたが、
focusFuncは呼び出されませんでした...
TypeScriptの場合は何か特別な処理が必要なのでしょうか...

[namnium1125]

実はfocusイベントなのにも関わらずdivにイベントを足していたので慌てて(18:30に)コードを編集したのですが、現在のコードでもダメでしょうか？

[wizz]

ご回答ありがとうございます。
変更後のコードを試したところ、動作しました！
ありがとうございました！！

Answer 4

focus時にalertだすとfocusが外れてしまいますがよろしいのでしょうか？
※動的な追加の部分も念の為かいておきます

HTMLElement.prototype.focusFunc=function(){
  alert("fucus!");
}
document.addEventListener('focus',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="text"){
    t.focusFunc();
  }
},true);
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.type=="button" && t.value=="add"){
    var n=document.createElement('input');
    n.setAttribute("type","text");
    t.parentNode.appendChild(n);
  }
});

<div>
<input type="button" value="add">
</div>

Comments

[wizz]

ご回答ありがとうございます。
HTMLElement.prototype.focusFunc...のところで
” Property 'focusFunc' does not exist on type 'HTMLElement'. ”
というエラーがでてしまいました。

原因を調査しながら、もう少し調べてみます！