Removing data from array using checkbox in Angular?

Question

I have a mat-table with some data generated through an API, here's a snippet for example:

<mat-table [dataSource]="dataSource$">
     <ng-container matColumnDef="process">
        <mat-header-cell #checkBox *matHeaderCellDef> Process </mat-header-cell>
        <mat-cell *matCellDef="let execution"> {{execution.process}} </mat-cell>
     </ng-container>
     <ng-container matColumnDef="reprocess">
      <mat-header-cell *matHeaderCellDef>  
         <button tslbutton class="tslbutton" id="reprocessButton">
            Reprocess
         </button> 
      </mat-header-cell>
      <mat-cell id="reprocessCell" *matCellDef="let execution">
         <mat-checkbox (change)="reprocessHomeProcesses(execution)" class="checker"></mat-checkbox>
      </mat-cell>
   </ng-container>
</mat-table>

Basically, each row has a process and a checkbox. Above the checkbox is a button that will call an API with an array of the checked data. I need to add the "execution" data to an array by clicking the checkbox. Currently, I'm able to send the data to the TS using the (change) function. This calls the following function:

executions = []

reprocessHomeProcesses(exe) {
    this.executions.push(exe);
    console.log(this.executions)
  }

This successfully adds the execution object to the array. Looks like this:

[{process: 1234, ....}]

However, when I deselect, the checkbox, it adds the same object again

[{process: 1234, ....}, {process: 1234, ....}]

(as expected, I don't have any logic for this.executions.pop() yet) How can I rewrite the function so that when I deselect the checkbox, it removes the object from the array?

I consulted this question: Remove deselected checkbox value from Array using Angular but I could not seem to get it to work for my code, maybe there's some slight differences in layout. But any help to remove item from array when checkbox is deselected would be great help!

I think I have an understanding of the adding and removal I just dont really understand how to differentiate check vs uncheck.

Share data inside exe and this.executions and on which basis you want to remove item? — navnath
– navnath, Commented Oct 6, 2021 at 20:50
Execution is what is used to generate the rows. this.executions is the array that the row data gets added to after the checkbox is checked. I want to remove item when the checkbox is unchecked. — benmessi12040
– benmessi12040, Commented Oct 6, 2021 at 20:55
But upon uncheck on which basis you are goin to remove item from this.executions, there must be some unique id — navnath
– navnath, Commented Oct 6, 2021 at 20:58
I am not sure how to assign a unique id to each checkbox since they are being automatically generated by the API. There is a checkbox for every row and there are thousands of rows across hundreds of pages. Before I tried adding the checkboxes to the array by using a separate button but that had its own issues. — benmessi12040
– benmessi12040, Commented Oct 6, 2021 at 21:01
Share some sample data inside array this.executions and what you get sinside exe upon check and uncheck — navnath
– navnath, Commented Oct 6, 2021 at 21:03

benmessi12040 · Accepted Answer · 2021-10-06 23:51:30Z

1

My solution was pretty simple. I added an event to the function call - like this.

<tsl-checkbox #myCheckbox [checked] (change)="setHomeProcesses(execution, $event)"></tsl-checkbox>

reprocessHomeProcesses(exe, event: any) {
    if (event.checked) {
      this.reprocesses.push(exe)
    } else {
      var index = this.reprocesses.indexOf(exe)
      if (index > -1) {
        this.reprocesses.splice(index, 1);
      }
    }
  }

This works as needed here.

answered Oct 6, 2021 at 23:51

benmessi12040

531 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

navnath Over a year ago

Does this solved your problem?

benmessi12040 Over a year ago

@navnath yes, this seemed to work. Thank you for your help, I would not have been able to figure it out without you :)

navnath Over a year ago

@benmessi1040 Not a problem always feels good while helping

Collectives™ on Stack Overflow

Removing data from array using checkbox in Angular?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related