I want a div to have a specific class when a toggle is in True and you remove it when the toggle is False using ionic 2 .
Once I saw in a tutorial that they used a condition with the ng-class directive but I do not remember well how they did this and I do not give with the tutorial.
If you want to add only one class to the div, you can do it like this:
[class.nombreClase]="nombreVariable"
To see how it works, you can see this plunker .
In the plunker I declare the variable that will modify the toggle (called fondoColor ):
@Component({...})
export class HomePage {
public fondoColor: boolean;
constructor() {}
}
And then we use it in the view to add or remove the class blue :
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item no-padding>
<ion-label>Colorear</ion-label>
<ion-toggle [(ngModel)]="fondoColor"></ion-toggle>
</ion-item>
</ion-list>
<div class="cuadrado" [class.blue]="fondoColor"></div>
</ion-content>
The styles that are being applied are:
div.blue { background-color: blue;}
div.cuadrado { height: 300px; width: 300px; border: 1px solid black;}