In application I have a toggle switch which has to be bind to data which is in the db. The name in the db is Status and it has values True/False. Now I am looking to use toggle switch buttons in my table rows, where it should display green if status retrieved from db is true and display black if status is false in db. I tried ngModel but its not working. No matter what, if i have true or false in DB it shows up as false only when i render on screen. For toggle switch i have to use my own component. below is my code.
html
<ng-container *ngFor="let data of displayData$ | async;let i = index">
<tr class= "row-break">
<form>
<p>
<cm-toggle-switch [(ngModel)]="data.Status" name="switch1" ></cm-toggle-switch>
</p>
</form>
</tr>
</ng-container>
DB-
export interface data[
{object:1,
Status:true;},
{object:2,
Status:false;}
]
but when i write {{data.Status}} it shows me true, false as values of Status perfect. where am I going wrong to bind values to my switch. any help.
toggle switch documentation -
<p>
<toggle-switch [(ngModel)]="formModel.switcher" name="switch1">Main power</toggle-switch>
</p>
formModel: any = {
switcher: true
};
<ng-container *ngFor="let data of displayData$ | async;let i = index">
<tr class= "row-break">
<form>
<p [style.color]="data.Status == true ? 'green' : 'black'">
<cm-toggle-switch [(ngModel)]="data.Status" name="switch1" ></cm-toggle-switch>
</p>
</form>
</tr>
</ng-container>
Can give it a try?