Toggle color doesnt change

Ionic Framework ionic-v3
1

how can i change the color when i pressed the toggle button, i have tried but it doesn’t work with any way…

<ion-item>
<ion-icon name="ios-eye" item-start></ion-icon>
<ion-label> Estado del Equipo:</ion-label>
<ion-toggle [(ngModel)]="userPostData.estado" color="green" *ngIf="checked"></ion-toggle>
<ion-toggle [(ngModel)]="userPostData.estado" color="red" *ngIf="!checked" ></ion-toggle>
</ion-item>
2

You can only change the color of checked toggles.

3

[color]="(userPostData.estado)?'green':'red'"
But as rapropos says this will only change the checked color, unless you overwrite the disabled styles or apply a conditional class.
Best regards,
J

4

Thanks, but how can i overwrite that disabled style?

5

STFF.

6

i saw that tutorial, but it used radio-button, i need to use toggle :frowning:

7

Did you read my comment in that thread, or my earlier one in this thread?

8

ooh it is works, thanks (y)

9

how u did it?i want the toggle to change color when its checked and below code is not working

	    <ion-toggle color="green"></ion-toggle>
10

Can try this

HTML:

<ion-item id="bg">
    <ion-label>TOGGLE COLOR</ion-label>
    <ion-toggle color="dark"></ion-toggle>
</ion-item>

CSS:

#bg{
    background: rgb(54, 189, 194);
}