CODEWITHSUNDEEP
htmlangulartypescript
Hrishikesh Kulkarni
Hrishikesh Kulkarni

Reputation: 81

Checkbox not getting ticked or untick when list of selected check box is deleted in Angular 7

I have a Json object which i use to display checkboxes using ngFor angular 7 directive,on selecting any of the checkboxes the values of labels are displayed on same page with provision of delete each value from this list but the list is not updating when deleting values. Code is attached,thanks for help in advance.

my ts file

    import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-checkboxexample',
  templateUrl: './checkboxexample.component.html',
  styleUrls: ['./checkboxexample.component.scss']
})
export class CheckboxexampleComponent implements OnInit {

  selectedItemsList = [];
  checkedIDs = [];

  checkboxesDataList = [
    {
      id: 'C001',
      label: 'Photography',
      isChecked: true
    },
    {
      id: 'C002',
      label: 'Writing',
      isChecked: true
    },
    {
      id: 'C003',
      label: 'Painting',
      isChecked: true
    },
    {
      id: 'C004',
      label: 'Knitting',
      isChecked: false
    },
    {
      id: 'C004',
      label: 'Dancing',
      isChecked: false
    },
    {
      id: 'C005',
      label: 'Gardening',
      isChecked: true
    },
    {
      id: 'C006',
      label: 'Drawing',
      isChecked: true
    },
    {
      id: 'C007',
      label: 'Gyming',
      isChecked: false
    },
    {
      id: 'C008',
      label: 'Cooking',
      isChecked: true
    },
    {
      id: 'C009',
      label: 'Scrapbooking',
      isChecked: false
    },
    {
      id: 'C010',
      label: 'Origami',
      isChecked: false
    }
  ]

  ngOnInit(): void {
    this.fetchSelectedItems()
    this.fetchCheckedIDs()
  }

  changeSelection() {
    this.fetchSelectedItems()

  }

  fetchSelectedItems() {
    this.selectedItemsList = this.checkboxesDataList.filter((value, index) => {
      return value.isChecked
    });
  }

  fetchCheckedIDs() {
    this.checkedIDs = []
    this.checkboxesDataList.forEach((value, index) => {
      if (value.isChecked) {
        this.checkedIDs.push(value.id);
      }
    });
  }
  deleteTodo(id: number): void {
    this.selectedItemsList = this.selectedItemsList.filter(item => item.id !== id);
  }
}

related html file

    <h1>Checklist</h1>
<div class="row">

    <div class="col-md-4">
        <h4>List of Hobbies</h4>

        <ul class="checkbox-items">
            <li *ngFor="let item of checkboxesDataList">
                <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
                    (change)="changeSelection()">{{item.label}}
            </li>
        </ul>

    </div>

    <div class="col-md-4">
        <h4>No of Selected Hobbies: {{selectedItemsList.length}} </h4>
        <ul>
            <li *ngFor="let item of selectedItemsList">{{item.label}}
                <div class="remove-item" (click)="deleteTodo(item.id)">
                    &times;
                </div>
            </li>

        </ul>

    </div>

    <div class="col-md-4">
        <h4>Object</h4>
        <code>
    {{selectedItemsList | json}}
    </code>

        <h4>Array of IDs</h4>
        <code>{{checkedIDs}}</code>
    </div>

</div>

Upvotes: 0

Views: 271

Answers (3)

Rajat
Rajat

Reputation: 187

You forgot to update the checkboxesDataList on deletion. Please find the working code below. https://stackblitz.com/edit/angular-ivy-s468tm?file=src/app/app.component.ts

Just update following method:

deleteTodo(id: number): void {
    
    this.selectedItemsList = this.selectedItemsList.filter(
      item => item.id !== id
    );
    this.checkboxesDataList.forEach(element => {
      if (element.id == id.toString()) {
        element.isChecked = false;
      }
    });
  }

Upvotes: 1

Nilesh Patel
Nilesh Patel

Reputation: 3317

id being passed to deleteTodo method should be string.

deleteTodo(id: string): void {
    this.selectedItemsList = this.selectedItemsList.filter(item => item.id !== id);
  }

Upvotes: 1

Moshezauros
Moshezauros

Reputation: 2593

you should use trackBy to resolve this - see docs

should looks something like the following (in the html):

    <li *ngFor="let item of checkboxesDataList; trackBy: trackById">
        <input type="checkbox" name="" id="" [(ngModel)]="item.isChecked"
            (change)="changeSelection()">{{item.label}}
    </li>

in in your component:

trackById(item: {id: string}) {
    return item.id;
}

Upvotes: 1

Related Questions