Cursos Empresas Blog Live Conf Eventos Precios

0:0015:43

Recursos

Resumen

Class binding

La versatilidad de Angular te permite agregar o quitar clases y estilos a tus elementos HTML a partir de condicionantes. Así como anteriormente utilizaste los corchetes [] para bindear atributos como el [src] de una imagen o el [href] de un enlace, puedes bindear clases para que Angular las agregue o quite dinámicamente si se cumple una condición de la siguiente manera:

<div [class.active-color]="isActive">
</div>

Imagina que tienes en tu componente una propiedad llamada isActive que agregará la clase active-color si esta es verdadera o quitará la clase si es falsa. Luego ya puedes darle los estilos que más te gusten al elemento HTML en tu hoja de estilos utilizando la clase active-color.

Style binding

También puedes añadir estilos inline a los elementos HTML bindeando la propiedad [style] seguido de la propiedad CSS que quieres modificar dinámicamente:

<p [style.color]="isActive ? 'blue' : 'red'"></p>

A partir del valor de isActive, dependiendo si este es verdadero o falso, puedes emplear un operador ternario para cambiar el color del párrafo.

Aporte creado por: Kevin Fiorentino.

Class and style

Curso de Fundamentos de Angular

Clase 17 de 21

Clase 17 / 21

German Pinilla

Hace 4 años

++Class and style++

En esta clase vimos como agregar dinamismo entre clases y estilos usando el property binding.

++Pasos para usar clases dinamicos en Angular++

Paso 1 - Creamos un input con un ngModel

<!-- Creamos un input con ngModel asociado a el tipo template inputNameClass por ejemplo -->
<input type="text" required #inputNameClass="ngModel" [(ngModel)]="person.name">

Paso 2 - Seguido del input, creamos un parrafo donde se indique que el campo es requerido con la clase "message-error"

<!-- Le creamos al parrafo una clase llamada "message-error" -->
<p class="message-error">El campo es requerido</p>

Paso 3 - En la hoja de estilos, agregamos unos estilos para la clase "message-error"

.message-error {
  background-color: red;
  color: white;
}

Paso 4 - Usamos el property binding y la sentencia class y con punto podemos activar una clase

<!-- le activamos una clase con el property binding para el template del input llamado #inputNameClass y le agregamos despues del punto el nombre de la clase que deseo activar cuando el dato este invalido-->
<p class="message-error" [class.active]="inputNameClass.invalid">El campo es requerido</p>

Paso 5 - Modificamos el estilo para que cuando nuestro inputNameClass sea invalido o vacio aparezca y desaparezca el parrafo de el error. Usamos la pripiedad de css llamada opacidad para mostrar y ocultar el texto del parrafo.

.message-error {
  background-color: red;
  color: white;
  opacity: 0; // Opacidad 0 me oculta por completo
  transition: all linear .5s; // Transicion de la clase - Efecto visual
  &.active {
    opacity: 1; // Opacidad 1 me mustra el contenido
  }
}

Usando las clases dinamicas, cuando esta invalid inputNameClass veremos:

++Pasos para crear estilos dinamicos++

Paso 1 - Creamos ahora una nuevo input con el nombre de el tipo template "inputNameStyle"

<!-- Se crea el input con el ngModel del tipo template "inputNameStyle" -->
<input type="text" required #inputNameStyle="ngModel" [(ngModel)]="person.name">

Paso 2 - Creamos un parrafo con un contenido y le agregamos el property binding style. Esto nos permitira modificar los estilos dinamicamente. Agregamos una pequeña condicion en la cual modificamos el texto de italic a normal dependiendo de el valor que contenga el input "inputNameStyle"

<!-- con style.font-style le ponemos una condicion que si es vacio sea italic y si no texto normal -->
<p [style.font-style]="inputNameStyle.invalid ? 'italic' : 'normal'">Texto texto texto</p>

Usando estilos dinamicos, cuando inputNameStyle sea invalid, veremos:

Comentarios (79)79 comentarios

Japheth Calzada López

Hace 5 años

No hay comentarios :O pero es un excelente curso

Nicolas Molina

Profesor

Muchas gracias 😊

Alexander Corcho

Joel Gutierrez

Creo que parte de que no haya comentarios, es el gran trabajo que hace el profesor en dar una explicacion tan clara, que practicamente no tienes ninguna duda pues se explica muy bien. Gracias Nico. Excelente Curso

Alba Montilva

Este curso me ha hecho agarrarle amor a angular, excelente curso.

Ruben Ariel

x2 jjj

Carlos Matias Avanzini

No puede estar mejor desarrollado este curso.. Felicitaciones

Samuel Pérez Bacilio

Para no confundirse un poco con la propiedad invalid en los estilos dinamicos también se puede validar el contenido del input

<p [style.font-style]="nameInput3.value === 'Hola' ? 'italic' : 'normal'">Estilo dinamico activado</p>

Luis Márquez

Veo el curso en octubre 2022 y si declaro una variable #nameInput3 y la uso en una línea anterior en la que declaré la variable, si funciona, creo que eso fue una mejora en angular.

Gabriel Acosta

Gracias, lo probé y me funcionó

Alina Salinas Mendoza

Tambien lo probe!

andres salguero

para ocultar contenido con css se recomienda usar display:none en lugar de opacity: 0 dado que display:none oculta todo el contendio sin dejar espacios visibles en el documento por contenido oculto. Para mostrarlo podrian usar display:block

Jose Alfredo Cano Hernandez

Podría asegurar que eres el mejor profe de platzi, gracias !

Luis Eduardo Vargas Martinez

Estaba en busca del héroe que pone los estilos en css pero no lo encontré, así que: .message-error{ background: red; color: white; opacity: 0; transition: all linear .5s; } .message-error.invalid { opacity: 1; }

Javier Alonso Rojas Butrón

Excelente

Gilberto Espinoza Maciel

Hace 3 años

te falta usar ` en tus comentarios para entrar en modo código. De la siguiente manera

.message-error{
background: red;
color: white;
opacity: 0;
transition: all linear .5s;
}
.message-error.invalid {
opacity: 1;
}

Victor Marquez

estos estilos dinamicos son mas entendibles que styled-component

Reinaldo Mendoza

Que buena sintaxis

Danilo Fandiño

El profe es un éxito, se entiende todo super fácil!

Reeeefacil

Jimmy Buriticá Londoño

Modificando el color del texto en línea:

<label>Nombre</label>
<input type="text" required #nameInput3="ngModel" [(ngModel)]="person.name" />
<p [style.color]="nameInput3.invalid ? 'red' : 'white'">El campo es requerido</p>

Diego Fernando Caviedes Camaho

como funciona el signo '&' donde dice &.invalid{ opacity:1; } que quiere decir este signo &

muchas gracias nicobytes me ha gustado bastante tus cursos muy bien explicados.

Aaron Paredes Cabrera

Excelente video, quedaron muy claros los conceptos 🎃.

Mateo Arias Correa

Profe, sos un crack. ¿Dónde está el Link de los formularios Reactivos?

john fredy quimbaya orozco

pregunta que tan buena practica es aplicar estos cambios de esta manera?

Daniel Meza

Buenísima. Las class and property binding son proporcionadas por angular, para proporcionar clases o estilos de manera dinámica.

Enlace a la documentación oficial de Angular

Luis Gerardo López Hernández

que tan buena o mala practica es manipular los estilos desde el html? segun yo es mejor cambiar las clases y moverle en el scss, es correcto eso?

Jorge Marroquin

No es recomendable debido a que a la hora de llevarlo a producción resulta más complicado identificar donde se encuentran los bugs de xq el diseño e interfaces que ya teníamos planeado no encajan correctamente. Con CSS no ocurre eso por eso es importante también aprenderlo.

Arturo Mauricio Terceros Beltrán

Por el tema del mantenimiento no es recomendable. Aclarar que entra en juego la especificidad.

Daniela Stornelli

8:35 hay alguna otra forma de hacer esto que no sea inline? porque tenia entendido que hacer las cosas inline no era correcto profesionalmente hablando. Que era una mala practica. O en este caso con angular y éste método es correcto?

Marcelo Vinicio Chavarría Ugalde

No es sea incorrecto, sino que es una opción que se puede emplear en casos que quizá lo requiera.

Remix Zapata

Por alguna razón desconocida no me funciona con

<p class="message-error" [class.invalid]="nameIput.invalid" >
	El campo es requerido
</p>

Pero con este cambio al menos emula el mismo comportamiento:

Andrés Felipe Eslava Zuluaga

Gracias por esto!

Recursos

Resumen

Class and style

Progreso del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

Despedida