angular 2 (change) event not firing

Question

I have the following function in my component:

onProductSelect(e){
        var attrs = document.getElementById('firstAttr');        
        return this.groupComponentSvs.getProduct(e.target.value)
                      .subscribe(
                            selectProduct=>{                                
                                this.selectProduct=selectProduct; 
                                var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";
                                console.log(select);
                                    select+= '<option value="0">Select</option>';
                                for (var i=0; i<selectProduct.values.length; i++)  {
                                    select+= '<option value='+ selectProduct.values[i]+ '>'+ selectProduct.values[i] +'</option>';
                                }  
                                select+='</select>' ;                                
                                attrs.innerHTML = '<div id=attr_'+ selectProduct.attribute +'>'+ select +'</div>';                              
                                error=>this.errorMessage = <any>error
                            }                            
                )                 

    }

selectNextAttr(attr, val){
 console.log("this is a test");
}

I am able to insert the select menu in my html page but the change event is not being triggered with I select an item. Can someone let me know why this is happening?

Thanks

Answer 1

HTML added using [innerHTML]="..." is not processed in any way by Angular and bindings, components, directives are not created for such HTML. The only thing Angular does with such HTML is sanitization for security purposes.

Therefore, you can't use [ngModel]="..." or (ngModelChange)="..."

One way to deal with such requirements is to dynamically create components at runtime and use the created HTML as a template for such a component. See Equivalent of $compile in Angular 2 on how this can be done.