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.
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
Este curso me ha hecho agarrarle amor a angular, excelente curso.
x2 jjj
No puede estar mejor desarrollado este curso.. Felicitaciones
Para no confundirse un poco con la propiedad invalid en los estilos dinamicos también se puede validar el contenido del input
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.
Gracias, lo probé y me funcionó
Tambien lo probe!
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
Podría asegurar que eres el mejor profe de platzi, gracias !
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;
}
Excelente
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;}
++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"
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 completotransition: 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:
estos estilos dinamicos son mas entendibles que styled-component
Que buena sintaxis
El profe es un éxito, se entiende todo super fácil!
Reeeefacil
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>
como funciona el signo '&' donde dice
&.invalid{
opacity:1;
}
que quiere decir este signo &
Esto es una sintaxis que tiene sass para el css en términos prácticos en ese casi esto:
&.invalid{opacity:1;}
es igual a que poner
.myCustom.invalid{opacity:1;}
Es decir que esa regla de estilo apliqué si un elemento tiene la clase .myCustom y .invalid al tiempo, en sass para hacer el uso de css anidado por ende se usaría ese signo &.
Esto lo puedes ver más a detalle en esta clase de sass minuto 12:30
muchas gracias nicobytes me ha gustado bastante tus cursos muy bien explicados.
Excelente video, quedaron muy claros los conceptos 🎃.
Profe, sos un crack. ¿Dónde está el Link de los formularios Reactivos?
pregunta que tan buena practica es aplicar estos cambios de esta manera?
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
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?
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.
Por el tema del mantenimiento no es recomendable. Aclarar que entra en juego la especificidad.
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?
No es sea incorrecto, sino que es una opción que se puede emplear en casos que quizá lo requiera.
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:
Ya me di cuenta del error xd
No me lo invalidaba porque no había puesto que ese input sea obligatorio ("required")
<input type="text" required #nameIput="ngModel" [(ngModel)]="username" placeholder="Enter your Name">
