CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

NG Style not changing background color

I have an ngStyle directive that I am trying to use however it is not changing the background-color of the toggle checkbox I have. When the toggle is false I want to have a grey background and when it is true I want to have an orange background.

<div class="relative">
 <input id="toggleBroker" type="checkbox" class="hidden" formControlName='sendToBroker' name="sendToBroker" [(ngModel)]="brokerDetails.sendtoBroker" (onChange)="!sendToBroker = sendToBroker"/>
 <div id="toggleBrokerBG" class="toggle__line w-10 h-4 rounded-full shadow-inner" [ngStyle]="'!sendToBroker' ? {'background-color': 'grey'} : {'background-color': 'orange'}" ></div>
 <div class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
</div>

Image of toggle checkbox

Any idea what is wrong?

Upvotes: 1

Views: 439

Answers (1)

evilstiefel
evilstiefel

Reputation: 496

Yes, it should be:

<div class="relative">
 <input id="toggleBroker" type="checkbox" class="hidden" formControlName='sendToBroker' name="sendToBroker" [(ngModel)]="brokerDetails.sendtoBroker" (onChange)="!sendToBroker = sendToBroker"/>
 <div id="toggleBrokerBG" class="toggle__line w-10 h-4 rounded-full shadow-inner" [ngStyle]="{ 'background-color': !sendToBroker ? 'grey' : 'orange' }" ></div>
 <div class="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"></div>
</div>

Your tertiary expression comes after the property, only for the value assignment. See the official docs for details.

Upvotes: 1

Related Questions