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
– mayur, Commented May 10, 2017 at 5:12

DJ22T · Accepted Answer · 2019-12-20 15:33:39Z

9

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.

edited Dec 20, 2019 at 15:33

DJ22T

1,6483 gold badges34 silver badges69 bronze badges

answered May 10, 2017 at 6:05

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:31:20Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered May 10, 2017 at 6:01

Malick

5271 gold badge4 silver badges16 bronze badges

3 Comments

aej1973 Over a year ago

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 Over a year ago

HTML Code: <select class="form-control" id="{{selectProduct.attribute}}" (change)="selectNextAttr(selectProduct.attribute,selectProduct.product_id)" name="selectProd"> <option value="0">Select</option> <option *ngFor = "let prod of selectProduct.values" value="{{prod}}">{{prod}}</option> </select>

aej1973 Over a year ago

TS:onProductSelect(e){ //var attrs = document.getElementById('firstAttr'); return this.groupComponentSvs.getProduct(e.target.value) .subscribe( selectProduct=>{ this.selectProduct=selectProduct; error=>this.errorMessage = <any>error } ) }

Sajeetharan · Accepted Answer · 2017-05-10 05:19:42Z

1

You should use ngModelChange instead of change

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

answered May 10, 2017 at 5:19

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Federico Grandi · Accepted Answer · 2018-10-16 19:44:41Z

0

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

edited Oct 16, 2018 at 19:44

Federico Grandi

6,7965 gold badges34 silver badges51 bronze badges

answered Oct 16, 2018 at 18:46

Narender Gandi

455 bronze badges

Collectives™ on Stack Overflow

angular 2 (change) event not firing

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Linked

Related