CODEWITHSUNDEEP
angular
cfoster5
cfoster5

Reputation: 1826

Checkbox - Fire one function when checked and fire another when not checked

Using Angular 5, I created a page where users can make selections with checkboxes. When items are checked, I am adding their IDs to an array, selecteddocs. When they are unchecked, I'd like to remove the item from the array. How can I trigger a function to remove the item(s) when it detects the checkbox has been unchecked?

Here is the HTML:

<table>
  <tr>
    <th></th>
    <th>Document Group</th>
    <th>Title</th>
    <th>Description</th>
  </tr>

  <tr *ngFor="let doc of docs">
    <td><input type="checkbox" (click)="select(doc.ID)"></td>
    <td>{{doc.DocumentGroup}}</td>
    <td>{{doc.Title}}</td>
    <td>{{doc.Description}}</td>
  </tr>
</table>

Here is the TS:

  selectedqr;
  selecteddocs = [];

  select(ID){
    this.selectedqr = ID;
    console.log(this.selectedqr);
    this.selecteddocs.push(ID);
    console.log(this.selecteddocs);
  }

//On Uncheck: var index = selecteddocs.indexOf(ID);
              selecteddocs.splice(index, 1);

Upvotes: 0

Views: 42

Answers (1)

Pezetter
Pezetter

Reputation: 2862

Just pass in the value of the checkbox on the change event.

<td><input type="checkbox" [(ngModel)]="doc.selected" (change)="select(doc.ID, doc.selected)"></td>

then run the appropriate function depending what doc.selected gives you.

Upvotes: 2

Related Questions