CODEWITHSUNDEEP
htmlangular
GustavoA
GustavoA

Reputation: 79

How to set checkbox input to false after event in ngFor

I have a list created from a ngFor, inside this list I have a child with a input checkbox, I need to set all checked==true to false, after an especific event is done.

I can't find any information about this implementation on angular 2/4, no Jquery.

Code example follow 

<div *ngFor="let x of all">
   <input type="checkbox" #userId (click)="selectedX($event, userId.checked, x)">
</div>

Basically you can select a number of users and choose to activate or deactivate them, from a modal. I want to set the checkboxes to false after the modal closes...

Can't find a way to do it.

Upvotes: 0

Views: 513

Answers (2)

GustavoA
GustavoA

Reputation: 79

So I follow what Dulaj said and created a new Array, in this new array I push my old data and a new information of state.

for (let user of users) {
    this.newArray.push({user: user, state: false});
}

this way I can iterate this new array and still have my old list working and can use the new state info to set my checkboxes, like Dulaj showed.

Upvotes: 1

Dulaj Atapattu
Dulaj Atapattu

Reputation: 446

Maintain an array field to store checkbox state. Register an event for modal close event. Then you can loop and set all checkbox states to false. Use two-way binding here.

page.component.ts

export class Page {
    chkBoxStates: [{state: true, data:{}}, {state: false, data:{}}, {state: true, data:{}}];

    onModalClose(): void {
        _.each(this.chkBoxStates, (item) => {
            item.state = false;
        })
    }
}

page.component.html

<div *ngFor="let item of chkBoxStates">
    <input type="checkbox" [(ngModel)]="item.state">
</div>

Upvotes: 1

Related Questions