Angular 4 capture toggleswitch(on/off) value using [(ngModel)] for n number of rows

Question

I have a toggle switch (on/off) button which i have kept in every row of my table. I want to capture the toggle on and off of every row's button so i can filter based on the results of on/off. Is it possible, if yes then how. I have the switch from custom based client provider which provides me options such as

checked: boolean,checkedLabel:string,disabled:boolean,name:string, and toggleSwitch:event emitter.

 <ng-container *ngFor="let data of displayData$ | async;let i = index">
                    <tr class= "row-break">

                        <td>  
                             <a>{{data.value1}}</a>
                        </td>
                        <td>
                            {{data.value2}}
                        </td>
                        <cm-toggle-switch [(ngModel)]="formModel.state[i]" toggleSwitchChange="toggle($event)" [checked]="true" ></cm-toggle-switch>
                    </tr>
                </ng-container>

Answer 1

Have a look at the Demo:

StackBlitz

Demo

Explanation:

Just use ngModel, no need for any event listener, nor checked property

<tr *ngFor="let row of rows; let i = index">
    <td>{{i + 1}}</td>
    <td><input type="checkbox" [(ngModel)]="row.selected"></td>
</tr>