Angular2 checkbox - uncheck event

Question

Hello I have dropdown menu with checkboxes and I have a problem with call function when click on dropdown menu item. Here is my code:

 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li *ngFor="let filter of column.filters">
            <div class="checkbox">
              <label><input type="checkbox" value="" #checkbox [(ngModel)]="filter.checked" 
                 (ngModelChange)="onSelectFilter(column)">{{filter.value}}</label>
            </div>
          </li>
        </ul>

Function onSelectFilter() is not called when checkbox is checked (I need to call with uncheck). What event I must use when I need call method with check and uncheck? Thanks

It works for me.

developer033
– developer033

2017-06-21 05:37:32 +00:00
Commented Jun 21, 2017 at 5:37 — developer033
– developer033, Commented Jun 21, 2017 at 5:37

NightCabbage · Accepted Answer · 2017-06-21 05:39:16Z

3

Take away the value="" and just set the initial model (filter.checked) to what you want it to start out as.

The value="" thing will just get in the way! :)

Also, it seems like you're using an ngFor to give you a list of checkboxes... but in the (ngModelChange), you are passing through the entire column (which has multiple checkboxes)... This may not be what you are intending to do?

eg. I think this might be more what you want?

(ngModelChange)="onSelectFilter(filter)"

answered Jun 21, 2017 at 5:39

NightCabbage

4894 silver badges12 bronze badges

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

2 Comments

bluray Over a year ago

Thanks, when I edited checkbox, it works:

<li *ngFor="let filter of column.filters">             <div class="checkbox">               <label><input type="checkbox" [(ngModel)]="filter.checked"                   (ngModelChange)="onSelectFilter(column)">{{filter.value}}</label>             </div>           </li>

NightCabbage Over a year ago

Excellent :) It's very easy to get caught out doing little "standard html" things that angular doesn't like!

Collectives™ on Stack Overflow

Angular2 checkbox - uncheck event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related