I recently posed a question that was somewhat similar to this, but I am facing a slightly different issue now. Within a table column, there are Slide-Toggle elements that users can toggle between true and false an unlimited number of times. Following these toggles is a button that allows the user to submit all the true/false values. In my HTML, these Slide-Toggle elements are generated from a notifications array using a for loop. What would be the most efficient and effective way to retrieve the true/false values of all these slide-toggles along with their IDs? Since I intend to submit them, it is crucial for me to achieve this. Below is what I have attempted so far
HTML
<h3>Notifications</h3>
<table class="table" id="thetable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Tasks</th>
<th scope="col">IsFinished</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let not of notifications;"
[ngStyle]="{ 'background-color': (not.isFinished ? '#dddddd' : 'white') }"
>
<th scope="row">{{not.id+1}}</th>
<td>{{not.task}}</td>
<td>
<section class="example-section">
<mat-slide-toggle
[id]="not.id"
class="example-margin"
[color]="color"
[checked]="not.isFinished"
[disabled]="not.isFinished"
(change)="onChange($event)"
>
</mat-slide-toggle>
</section>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<button mat-raised-button color="primary" (click)="openDialog()">Add Task</button>
<button mat-raised-button color="primary" (click)="onSave()">Save</button>
</div>
TypeScirpt (Initialization of Array)
ngOnInit() {
this.notifications=this.notificationService.getNotifications();
}