Uncheck all checked checkboxes Angular2

2
votes

I have a list of checkboxes generated from a ngFor loop and a reset button. When the reset button is clicked, if any of the checkboxes are checked I want to uncheck them.

Here is my html

<li *ngFor="let item of listItems" class="filter-list__item">
    <label class="filter-list__itemLabel">
        <input type="checkbox" value="{{item.id}}" [checked]="checked" />
        <span innerHTML="{{item.name}}"></span>
    </label>
</li>
<button (click)="resetAll()"></button>
3
angular

3 Answers

8
votes

You probably want to bind the checked attribute to the state of the item like this.

<li *ngFor="let item of listItems" class="filter-list__item">
    <label class="filter-list__itemLabel">
        <input type="checkbox" value="{{item.id}}" [checked]="item.checked" />
        <span innerHTML="{{item.name}}"></span>
    </label>
</li>

<button (click)="resetAll()"></button>

Now you could create the resetAll function in your component to access the list items and reset the values to false

resetAll() {
  this.listItems.forEach((item) => {
    item.checked = false;
  })
0
votes

My Solution is the following and it works like a charm:

Let's say you are using a modal dialogue. The best way is to subscribe to it's onClose-Observable. Then you simply overwrite the underlying list with a clone of itself. Angular is now forced to repaint the whole list and it automatically removes all ticks.

ngAfterViewInit() {

    this.modal.onClose.subscribe(() => {
        if (this.objectList) {
            this.objectList = JSON.parse(JSON.stringify(this.objectList));
        }
    });

}

In case you're not using a modal dialogue, just implement a method to trigger the overwrite-process.

0
votes
Select All Checkbox & deslect All Checkbox 
Here this.categoryData is a array where all  category_id with nested are present 

// Deselect all catgory

resetAll() {
    this.accountCategories = [];

}

    selectAll() {
        let CategoryDataArray = [];
        this.categoryData.forEach(element => {
            if (element.sub_categories.length > 0) {
                element.sub_categories.forEach(subcategory => {
                    CategoryDataArray.push(subcategory.category_id)
                });
            }
            CategoryDataArray.push(element.category_id)

        });
        this.accountCategories = CategoryDataArray;
        var catArray = []
        if (this.accountCategories) {
            this.categoryArray.push(this.accountCategories)

            var categories = {};

            this.categoryArray[0].forEach(element => {
                if (!categories[element]) {
                    categories[element] = [];
                }
                categories[element] = { 'status': 'active' };
            });
            catArray.push(categories);
            return this.categoryResult = catArray
        }
    }