samedi 17 juillet 2021

Angular 11 Select All, Deselect All check boxes like Gmail

I am trying to do check boxes with select all and deselect all options.

I have faced an issue that,

first I checked all option(that works), secondly I uncheck one or more checkboxs(NOT CheckALL one)(that is also works). finally i check all option(This does not works)

(when I select all options that is OK ( all checkbox are checked) when I deselect all options that is OK ( all checkbox are unchecked))

Output is :

Screenshot of Output

.component.ts file

AllSelectedHandler(checked: boolean, book) {
    const idArr = book.map(i => i.id);
    console.log("ID array " + idArr);

    if (checked == true) {
      this.checkedAll = true;
      this.checkedRow = true;

      idArr.forEach(id => {

        if (this.checkedAll == true) {
          this.checkedRow = true;
          console.log("checkedRow works ")
          console.log(this.checkedRow)
        }

        if (this.checkedRows.includes(id)) {
          this.checkedRows.push();
          console.log("if works");
        }
        else {
          this.checkedRows.push(id);
         // this.checkedRow = true;
          console.log("else works");
          console.log("id is " + id);
        }

      });

      console.log(this.checkedRows);
      console.log("checked row" + this.checkedRows);

      const numSelected = this.checkedRows.length;
      console.log("no of selected" + numSelected);
    }
    else {
      this.checkedAll = false;
      this.checkedRow = false;
      this.checkedRows = [];
      this.multipleDelete = false;
      console.log(this.checkedRows);
    }
    const numRows = this.books.length;
    console.log("no of rows " + numRows);
  }

.html

  <nb-checkbox [value]= "books" [checked]="checkedAll" (checkedChange)="AllSelectedHandler($event, books)" ></nb-checkbox>
                        
  <nb-checkbox value= [checked]="checkedRow"
                        (checkedChange)="CheckboxChangeHandler($event, data.id)"></nb-checkbox>

In console:

ID array 23,22,21,2,1

checkedRow works 
true
else works
id is 23

checkedRow works 
true
else works
id is 22

checkedRow works 
true
if works

checkedRow works 
true
if works

checkedRow works 
true
if works

(5) [21, 2, 1, 23, 22]

checkedrows 21,2,1,23,22

no of selected 5

no of rows 5

Here notice that All checkedRow values are true. But in output check box is unchecked.

Please can anyone tell what is the issue?




Aucun commentaire:

Enregistrer un commentaire