How to push and remove item from an array on checked or unchecked of checkboxes?

Question

when clicking on a checkbox and event.target.checked === true, in the following table, I am pushing the headerName and cell into an array, but I am unable to remove the item when event.target.checked === false, since I don't have the index of the added item. Any clue to solve this will be appreciated.

https://stackblitz.com/edit/angular-ivy-rgchvw?file=src%2Fapp%2Fapp.component.html

component.ts

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;
  public checkedItems = [];
  public tableHeaderNames = [
    "Header1",
    "Header2",
    "Header3",
    "Header4",
    "Header5"
  ];
  public roles = [
    "Role1",
    "Role2",
    "Role3",
    "Role4",
    "Role5",
    "Role6",
    "Role7"
  ];

  select(e, g) {
    if (e.target.checked === true) {
      let checkedObj = {
        headerName: g,
        cell: "test"
      };
      this.checkedItems.push(checkedObj);
    }
    console.log(this.checkedItems);
  }
}

component.html

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th scope="col" *ngFor="let columnNames of tableHeaderNames"> 
     {{columnNames}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of roles">
      <td>{{ role }}</td>
      <td *ngFor="let roleColumn of tableHeaderNames; let i = index">
        <input (click)="select($event, roleColumn)" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

Answer 1

You will need to add another parameter for the select($event, roleColumn) to check against the role selected. As you need to check against both headerName and roleNo for cases when it's duplicate in row or column. Then add findIndex and splice for it.

You can make the changes like so

html

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th scope="col" *ngFor="let columnNames of tableHeaderNames">{{columnNames}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let role of roles">
      <td>{{ role }}</td>
      <td *ngFor="let roleColumn of tableHeaderNames">
        <input (click)="select($event, roleColumn, role)" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>

ts

select(e, g, r) {
    if (e.target.checked === true) {
      let checkedObj = {
        roleNo: r,
        headerName: g,
        cell: "test"
      };
      this.checkedItems.push(checkedObj);
    }
    if (e.target.checked === false) {
      var index: number = this.checkedItems
                    .findIndex(x => x.roleNo === r && x.headerName === g);
      console.log(index);
      if (index > -1) {
        this.checkedItems.splice(index, 1);
      }
    }
    console.log(this.checkedItems);
}

Answer 2

solved it using findIndex() and Splice()

else{
      let index = this.checkedItems.findIndex(
        item => item.headerName === g
      )
      this.checkedItems.splice(index, 1)
    }