CODEWITHSUNDEEP
angulartypescript
aej1973
aej1973

Reputation: 95

angular 2 (change) event not firing

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

Upvotes: 5

Views: 26242

Answers (4)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658205

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.

Upvotes: 9

Narender Gandi
Narender Gandi

Reputation: 45

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);
}

Upvotes: 0

Malick
Malick

Reputation: 527

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

Try:

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

Upvotes: 5

Sajeetharan
Sajeetharan

Reputation: 222720

You should use ngModelChange instead of change

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

Upvotes: 1

Related Questions