Si querés agregar sólo una clase al div, podes hacerlo así:
[class.nombreClase]="nombreVariable"
Para ver como funciona, podés ver éste plunker.
En el plunker declaro la variable que va a modificar el toggle (llamada fondoColor
):
@Component({...})
export class HomePage {
public fondoColor: boolean;
constructor() {}
}
Y luego la usamos en la vista para agregar o quitar la clase 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>
Los estilos que se están aplicando son:
div.blue { background-color: blue;}
div.cuadrado { height: 300px; width: 300px; border: 1px solid black;}