No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

5D
16H
31M
24S

NgClass y NgStyle

18/22
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 22

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 NgClass directiva te permite configurar la clase CSS de forma din谩mica para un elemento DOM .

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.

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>

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贸 馃槃

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! 馃槂

Is magic

[ngStyle]

Permite agrupar los estilos de un elemento en un objeto. La llave es el nombre de la propiedad de CSS y est谩 acompa帽ada de su valor correspondiente que puede provenir de una variable modificada con ngModel.

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

Personalmente me ha parecido un curso confuso y al final se ha centrado en CSS.

Que bueno que a futuro los entrenadores en Platzi cuando vayan a ense帽ar los fundamentos de Angular, React etc tengan una linea centrada y no se pierdan en el camino con otros temas,

El manejo del c贸digo presentado es bastante desordenado al tener una pizarra llena de todos los ejercicios que se van dando a trav茅s del curso. Deber铆a para cada tema tener a nivel de c贸digo solo el c贸digo que tiene que ver con la clase.

En conclusi贸n personalmente al final he visto un curso confuso, desenfocado y desordenado.

Me vol贸 la cabeza eso de que puedo espcificar el tipo de unidad en los ngStyles, un mont贸n de a帽os trabajando con angular y no sab铆a eso :S

Un excelente curso, 100% son los fundamentos, muchas gracias a Platzi y a Nicolas por esta clase y curso

durante semanas trataba y veia Angular como algo complejo, hasta que tome este curso y he comprendido todo en dos dias, increible maestro = excelente curso

Con [ngClass] y [ngStyle] tenemos la posibilidad de agrupar varias clases y estilos para un mismo elemento y que se modifiquen din谩micamente. Por ejemplo, si estamos escuchando un elementos input y evaluando si tiene o no contenido (condici贸n booleana), y para cada uno de los casos tenemos estilos diferentes para mostrar, podemos usar [ngClass] el cual recibe un objeto donde cada clave es el nombre de una clase y el valor es el nombre de la variable template m谩s su condici贸n (valid o invalid).


En este ejemplo, b谩sicamente se pinta una l铆nea por debajo del input que va ser de color verde si el input est谩 completo y de color rojo si est谩 vac铆o.
Algo similar podemos hacer con [ngStyle] con la diferencia de que, en este ejemplo, nos apoyamos de una variable de tipo objeto creada en nuestro controlador. En ella colocamos algunos atributos con valores por defecto como el ancho, el alto y el color de fondo.

Ahora, en el html creamos un input para cada uno de estos atributos y un div que va a estar escuchando esos inputs utilizando [ngStyle] que tambi茅n recibe un objeto en donde cada clave es el atributo a mostrar y cada valor remite a es mismo atributo en la variable del controlador.

Algo interesante es que un input con el type de tipo 鈥渃olor鈥 nos despliega en la vista un selector de colores propio del browser y del SO que estemos utilizando.

Qued茅 flipando con esta clase

Que padre herramienta, asi podriamos colocarle los estilos a todo lo que queramos, lo que si es que tengo que estudiar mas los css para no quedarme con cara de What?!
Y mientras tanto, practique mas con NgStyle y me salio genial mi practica.

ngClass y ngStyle

Podemos manipular las clases y los estilos dinamicos usando
las directivas ngClass y ngStyle que nos proporciona Angular
para la manipulacion mas facil y eficiente de estas propiedades.

Directivas de tipo atributo
Se aplican como atributos a los elementos HTML. Modifican el DOM pero sin ser capaces de crear y destruir el elemento HTML sobre el que se aplican.

Las directivas de tipo atributo est谩n formadas por:

[ngStyle]: Nos permitir谩n cambiar las propiedades del elemento HTML seleccionado.

[ngClass]: Nos permitir谩n agregar clases din谩micamente sobre el elemento HTML seleccionado.

.line-error {
  height: 0;
  border-bottom: 1px solid;
  &.invalid {
    border-color: red;
  }
  &.valid {
    border-color: green;
  }
}
<h1>ngClass and ngStyle</h1>
  <h4>ngClass directive</h4>
  <input type="text" required #inputNameNgClass="ngModel" [(ngModel)]="person.name">
  <hr class="line-error"
    [ngClass]="{'invalid': inputNameNgClass.invalid, 'valid': inputNameNgClass.valid }"
    >
  <p class="message-error" [class.active]="inputNameNgClass.invalid">El campo es requerido</p>
  <h4>ngStyle directive</h4>
  <div class="my-styles">
    <div>
      <input type="number" required [(ngModel)]="box.width">
      <input type="number" required [(ngModel)]="box.height">
      <input type="color" required [(ngModel)]="box.background">
    </div>
    <div [ngStyle]="{ 'width.px': box.width, 'height.px': box.height, 'background-color': box.background, 'display': 'block' }">

    </div>
  </div>

Buenas gente, si les molesta el poco espacio del Tab que dejan en el archivo HTML busquen el archivo .editorconfig en su proyecto y cambien la variable indent_size qu茅 por defecto esta en 2

[ngClass]

Permite agrupar m煤ltiples clases de Angular en un objeto en el que la llave es la clase y el valor es la condici贸n para que esta sea agregada. Esto es muy 煤til si se tiene un elemento al que se le apliquen muchas clases, o cuando desde el controlador del componente se tienen varias condiciones con base en consultas a una base de datos, etc. En ese caso se pasar铆a el objeto con las clases a la vista del componente para renderizarlo.

<input type="text" required #nameInput4="ngModel" [(ngModel)]="name" />
<hr
  class="line-error"
  [ngClass]="{
    'valid': nameInput4.valid,
    'invalid': nameInput4.invalid
  }"
/>

la validaci贸n de NgClass y NgStyle no m sal铆a ahora ya mejore m proyecto, gracias profe

Que buen curso!

bastante picante esta clase amigos!