Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

NgClass y NgStyle

18/21
Recursos

Con el binding de [class] y [style] puedes agregar clases y estilos fácilmente. Pero se vuelve algo complicado en el caso de que necesites agregar varias clases o modificar muchos estilos. Es por esto que Angular ofrece las directivas ngClass y ngStyle para este propósito.

Puedes bindear la directiva [ngStyle] o [ngClass] y pasarle un objeto con cada propiedad o clase que deseas agregar:

<p
    [ngStyle]="{
        'color': textColor,
        'background': textBackground
    }"
></p>

El operador ternario será tu mejor aliado para agregar o quitar clases y estilos:

<div
    [ngClass]="isAvailable ? 'active-class' : 'deactivate-class'"
></div>

O puedes usar las Interpolaciones en lugar del binding:

<p
    ngClass="{{ isAvailable ? 'active-class' : 'deactivate-class' }}"
></p>

Aporte creado por: Kevin Fiorentino.

Aportes 10

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

La NgClass directiva te permite configurar la clase CSS de forma dinámica para un elemento DOM .

Estoy emocionado, hasta ahora me han salido todos los ejemplos, gracias Nico, Dios te bendiga hermano, he aprendido mucho con este curso, Dios bendiga Platzi

La NgStyle directiva te permite establecer propiedades de estilo de elementos DOM determinados .

Mi aporte es felicitar a Nicolás el profe, domina excelentemente el tema, me gustaría que tuviera un curso de css, veo que lo maneja a la perfección, gracias profe.

Muchas gracias!! Se me estaba complicando un poco comprender este tema pero después de ver esta lección me ha quedado mucho más claro, hasta me emocioné cuando me salió 😄

ngStyle permite modificar varios estilos de un elemento HTML, comparto el ejemplo del profesor:

<div class="styles">
  <div>
    <input type="number" [(ngModel)]="box.width" />
    <input type="number" [(ngModel)]="box.height" />
    <input type="color" [(ngModel)]="box.background" />
  </div>
  <div>
    <div [ngStyle]="{
      'width.px': box.width,
      'height.px': box.height,
      'background-color': box.background,
      'display': 'block'
    }"></div>
  </div>
</div>

Que buen curso!

Is magic

bastante picante esta clase amigos!

La directiva ngClass es necesaria para, de una manera cómoda asignar cualquier clase CSS entre un grupo de posibilidades. Puedes usar varios valores para expresar los grupos de clases aplicables. Es parecido a como funcionaba en Angular 1.x.

Muy buena clase! 😃