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

Yes sure there is an issue with `(change)` event in Angular 2. It works same as `(blur)` if you notice carefully.. Yes you can use `(ngModelChange)` which triggers as soon as there is some change in input from user — mayur, May 10 '17 at 05:12

score 9 · Answer 1 · edited Dec 20 '19 at 15:33

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.

score 5 · Answer 2 · edited May 23 '17 at 10:31

5

Check this answer: https://stackoverflow.com/a/33716321/2114024

Try:

<select [ngModel]='selectedProduct' 
        class='form-control' 
        [id]='"+ selectProduct.attribute +"' 
        (ngModelChange)='selectNextAttr($event)' name='selectProd'>

edited May 23 '17 at 10:31

Community

1
1

answered May 10 '17 at 06:01

Malick

477
4
16

Thanks for getting back to me, still does not seem to work. If I do the following it works but I need to add this dynamically using ts: – aej1973 May 10 '17 at 11:18
HTML Code: – aej1973 May 10 '17 at 11:18
TS:onProductSelect(e){ //var attrs = document.getElementById('firstAttr'); return this.groupComponentSvs.getProduct(e.target.value) .subscribe( selectProduct=>{ this.selectProduct=selectProduct; error=>this.errorMessage = error } ) } – aej1973 May 10 '17 at 11:19

score 1 · Answer 3 · answered May 10 '17 at 05:19

1

You should use ngModelChange instead of change

 "<select class='form-control' id='"+ selectProduct.attribute +"' (ngModelChange)='selectNextAttr($event)' name='selectProd'>"

answered May 10 '17 at 05:19

Sajeetharan

216,225
63
350
396

score 0 · Answer 4 · edited Oct 16 '18 at 19:44

Your method:

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

This is expecting 2 parameters, whereas in the usage you have passed only one:

var select = "<select class='form-control' id='"+ selectProduct.attribute +"' (change)='selectNextAttr($event)' name='selectProd'>";

If you want to get only the value of the selected item, change method signature as below.

selectNextAttr(event) {
  // this will give the selected item value.
  console.log("this is a test", event.target.value);
}

angular 2 (change) event not firing

4 Answers4