NgClass y NgStyle

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.

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.

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

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 “color” nos despliega en la vista un selector de colores propio del browser y del SO que estemos utilizando.

En firefox por alguna razón no funciona el NgStyle

[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>

✅

Me hubiese gustado ofrecer dinamismo sin estilos en linea como en React. Pero… aún así me convence usar estilos en linea para ofrecer dinamismo y esto tendría mucho sentido, ya que queremos que priorice los errores, alertas, notificaciones, etc.

Muchas gracias profe!

El profesor es bueno explicando pero creo se desenfoco muchísimo el contenido del curso.

Algo que se podría mejorar del curso:

-El HTML siempre muestra los ejercicios pasados, es necesario organizar y borrar ese contenido para empezar con otra clase.

-No hay ejemplos reales

-Nos estamos enfocando mucho al CSS y no en Angular

Reitero, el profe es bueno y se ve que domina el tema, pero el contenido quiza no es el mejor

Me estoy enamorando de Angular, antes lo odiaba .!!

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

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!