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

Edixon javier Pabon Lizcano

Emmanuel Jose Lamprea Florez

Literal me pasa igual, esta tan bien explicado que es fácil de entender y sale todo a la primera, ya con el tiempo iremos haciendo cosas más complejas.

Juan Carlos Ortiz Romero

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

carlos augusto sabino cañizares

Asi es

Juan Carlos Ortiz Romero

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

Diego Maldonado

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.

Diego Jurado

Muy buenos comentarios hacia el profe, sobre todo por la sensación de estar adquiriendo el conocimiento!!

ELKIN YESID MORENO VELEZ

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.

Emiliano Brégains

Si bien comparto que el archivo HTML quedo un poco desordenado y que quizas los nombres de las clases y de las variables podrian haber sido mejor elegidas, no comparto asi decir que fue un curso que se centro en CSS. Siendo angular un framework para desarollar paginas web, pretender que no se incorpore el uso de CSS es como ir a un curso de pasteleria pretendiendo que no usen harina.

Jimmy Buriticá Londoño

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>

Nohely Badillo

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ó :D

Sebastian Sanmartin

hay posibilidad de añadir una clase en el ng class pero en x momento eliminar otra que le pusiste.

Luis Manuel Débora Ontiveros

Si te refieres a algo como:

<span class="otra-clase" [ngClass]="{'una-clase': aplicar}">Algo aquí...</span>

Y en ese x momento quitarle otra-clase? Entonces ambas clases deberían estar en el ngClass. Es decir, algo así:

<span [ngClass]="{'otra-clase': !eliminar, 'una-clase': aplicar}">Algo aquí...</span>

O bien:

<span [class.otra-clase]="!eliminar" [ngClass]="{'una-clase': aplicar}">Algo aquí...</span>

Déjame saber si entendí bien tu duda, y si esta es la respuesta que buscabas.

Sebastian Sanmartin

buenisima eres un genio

Aaron Paredes Cabrera

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! :)

Alba Montilva

Is magic

Reinaldo Mendoza

almost, haha

Claudio Matías Correa Espínola

¿Para qué agregamos 'display': 'block' al [ngStyle] del <div>? ¿Los div no tienen ese display por defecto?

Santiago González

display: block; es una propiedad de estilo CSS que se utiliza para indicar que un elemento debe ocupar todo el ancho disponible y que debajo de él se deben colocar otros elementos. Los elementos div tienen display: block por defecto, por lo que no es necesario especificarlo explícitamente a menos que se haya cambiado el valor por algún otro estilo o se haya utilizado alguna clase que cambie el comportamiento predeterminado.

Cuando se utiliza la directiva [ngStyle] en un elemento div, se pueden aplicar estilos dinámicamente desde el componente de Angular en lugar de utilizar un archivo de estilo separado. La propiedad [ngStyle] acepta un objeto que contiene pares clave-valor para los estilos que se deben aplicar al elemento. En este caso, display: block es uno de los pares clave-valor que se están aplicando al elemento div.

Binder Germán Ariel

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.

EDUARDO FLORES

En firefox por alguna razón no funciona el NgStyle

Andres López

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

Nelson Rodolfo Boche Santos

En Firefox no funcionó lo del Color, en Chrome si funcionó... ¿A que se debe?

Luis Márquez

Si funciona, lo que pasa es que debe de tener la flecha vertical de lado derecho asignado en negro, muevela hacia arriba, sino cambia el rgb de 0, 0 ,0 a unos valores distintos.

Giuseppe Ugarelli

por que el hr donde pone el ng class tiene un slash ?

Donny Daniel Vásquez Ramos

¿Alguien tiene un ejemplo trayendo un objeto desde una fuente externa?

ANDRES ALFONSO MIRA MEJIA

✅

Kevin Daniel Guzman Delgadillo

El volumen del video está más bajo que en los anteriores

Brandon Lee Aguero Fernandez