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! ūüėÉ