I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains true regardless of the setting) which was not a problem before converting it into a component. At times, the switch values are fetched from the backend and passed to the component using Input(). The component receives these values correctly (verified by checking the variable toggleValue) but the button does not reflect the correct value. Below is a snippet of the component code (highly parameterized):
<label class="small-font">
{{translationIsActive ? (toggleLabelText | translate) : toggleLabelText}}
</label>
<div [ngClass]="toggleSwitchStyle" class="can-toggle">
<input [id]="toggleElementId" type="checkbox" [value]="toggleValue"
[disabled]="disabled" (click)="switchValue()">
<label [for]="toggleElementId">
<div class="can-toggle__switch"
[attr.data-checked]="translationIsActive ? (toggleElementForTrue |
translate) : toggleElementForTrue"
[attr.data-unchecked]="translationIsActive ? (toggleElementForFalse |
translate) : toggleElementForFalse">
</div>
</label>
Additionally, here is a screenshot of the toggle switch right after the page loads (with values retrieved from the backend) and beneath it, there is the expected setting (in this case - no). When I manually switch the value, everything functions correctly. The issue seems to occur only when the application initially loads a certain view containing these switches.