Class and style
Contenido del curso
Class and style
Contenido del curso
Japheth Calzada López
Nicolas Molina
Profesor
Alexander Corcho
Joel Gutierrez
Alba Montilva
Ruben Ariel
Carlos Matias Avanzini
Samuel Pérez Bacilio
Luis Márquez
Gabriel Acosta
Alina Salinas Mendoza
andres salguero
Jose Alfredo Cano Hernandez
Luis Eduardo Vargas Martinez
Javier Alonso Rojas Butrón
Gilberto Espinoza Maciel
German Pinilla
Victor Marquez
Reinaldo Mendoza
Danilo Fandiño
Reinaldo Mendoza
Jimmy Buriticá Londoño
Diego Fernando Caviedes Camaho
Nicolas Molina
ProfesorDiego Fernando Caviedes Camaho
Aaron Paredes Cabrera
Mateo Arias Correa
john fredy quimbaya orozco
Daniel Meza
Luis Gerardo López Hernández
Jorge Marroquin
Arturo Mauricio Terceros Beltrán
Daniela Stornelli
Marcelo Vinicio Chavarría Ugalde
Remix Zapata
Remix Zapata
Andrés Felipe Eslava Zuluaga
No hay comentarios :O pero es un excelente curso
Muchas gracias 😊
X2
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
<p [style.font-style]="nameInput3.value === 'Hola' ? 'italic' : 'normal'">Estilo dinamico activado</p>
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++
<!-- Creamos un input con ngModel asociado a el tipo template inputNameClass por ejemplo --> <input type="text" required #inputNameClass="ngModel" [(ngModel)]="person.name">
<!-- Le creamos al parrafo una clase llamada "message-error" --> <p class="message-error">El campo es requerido</p>
.message-error { background-color: red; color: white; }
<!-- 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>
.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++
<!-- Se crea el input con el ngModel del tipo template "inputNameStyle" --> <input type="text" required #inputNameStyle="ngModel" [(ngModel)]="person.name">
<!-- 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">
Gracias por esto!
