0

Quiero que un div tenga una clase especifica cuando un toggle esta en True y que la quite cuando el toggle esta False usando ionic 2.

Alguna vez vi en un tutorial que usaban una condición con la directiva ng-class pero no recuerdo bien como hacían esto y tampoco doy con el tutorial.

1 respuesta 1

1

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;}
3
  • Excelente! me funciono, pero ahora me toca hacer lo mismo pero evaluando si esta en sistema operativo de iOS agregar la clase. si sabe como se hace lo pongo en otra pregunta. Commented el 16 jun. 2017 a las 22:23
  • Genial, me alegro que te haya servido la respuesta. Dale, si queres crea una nueva pregunta con los requisitos y trato de ver cómo se podría hacer :) Commented el 16 jun. 2017 a las 22:26
  • ya lo logre. :D gracias de todas forma Commented el 16 jun. 2017 a las 22:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.