Within my application, I am facing an issue with binding a toggle switch to data stored in the database. The data in the database is represented by a field called Status, which can have values of True or False. My goal is to incorporate toggle switch buttons within table rows that will display green if the status retrieved from the database is true, and black if the status is false. However, my attempts at using ngModel have not been successful. No matter what value (true or false) is stored in the database, it always displays as false when rendered on screen. To achieve the desired functionality for the toggle switch, I must use my own custom component. Below is a snippet of 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}
}
When I output {{data.Status}}, it correctly shows true or false as values of Status. Where could I be making a mistake in binding these values to the switch? Any assistance would be appreciated.
Toggle Switch Documentation -
<p>
<toggle-switch [(ngModel)]="formModel.switcher" name="switch1">Main power</toggle-switch>
</p>
formModel: any = {
switcher: true
};