0

I've created a custom toggle switch for my application and used it in several places. I've decided to rewrite it as a component. But now I'm suffering a problem in which toggle switch button is not updated in view(it's always set to true no matter what) which didn't occured when it wasn't component. Sometimes value of the switches come from backend and I'm sending them via Input() to the component - it receives them properly as I have checked(variable toggleValue is holding value I want) but button is not switched to the right value. Here's code sample of my component(It's almost fully 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>

Here's also screenshot of my toggle switch just after page is loaded(and values are received from backend) and under it, there's value which should it be set to(in this example - no). I can switch value manually and then, everything works properly. The problem lies just after application loads certain view with these switches first time.

enter image description here

Macryo
  • 188
  • 2
  • 12

1 Answers1

0

Try to replace the [disabled] with [attr.disabled]='your logic here...' at the input

Kostas Asargiotakis
  • 144
  • 1
  • 9