Angular2：为Typescript中的select设置更改属性

Question

I am dynamically creating dropdowns in my typescript code. That works perfectly fine. However, I cannot figure out how to set the "onchange" event for the dropdowns - so that it triggers whenever the value of the dropdown is changed.

That's my ts code so far:

  private createDropDown() {
    const parent = document.getElementById('dropdown-container');
    const sel: any = document.createElement('select');
    sel.setAttribute('id', 'bbCount' + this.bbCount);
    sel.setAttribute('class', 'labelDropdown');
    $('labelDropdown').on('change', e => this.onDropdownChange(e));
    for (let i = 0; i < 8; i++) {
      const opt: any = document.createElement('option');
      opt.setAttribute('text', this.labels[i].value);
      opt.setAttribute('value', String(this.labels[i].id));
      opt.innerText = this.labels[i].value;
      sel.appendChild(opt);
    }
    parent.appendChild(sel);
  }

  public onDropdownChange(e) {
    console.log('event', e);
  }

html:

  <div style="width: 100%" id="dropdown-container">
  </div>

I tried several approaches, the last one was

$('labelDropdown').on('change', e => this.onDropdownChange(e));

However, this.onDropdownChange(e) is never called or just when the dropdown is created and not when the value is changed.

Does anyone know how I can set the change event on the select inside my typescript code?

Answer 1

You are doing a lot of things counter to recommended way of doing it with Angular. In this example, you're adding HTML with jQuery, so Angular won't know about these components. And if you hook regular JavaScript events, it's outside of angular's knowledge. You could wrap it in a zone, with some refactoring. Or you could do it the recommended way - create an angular dropdown component (can be a simple wrapper around your jQuery), and create an injector that injects this component dynamically.

Another thing is that angular's change would work an an actual select or whatever. So you can make this component implement eg custom input control. Then you could hook to it's (change) or (ngModelChange) events in your component.