A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Class and style

17/21
Recursos

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.

Aportes 25

Preguntas 6

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

No hay comentarios ūüėģ pero es un excelente curso

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

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>

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

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>

estos estilos dinamicos son mas entendibles que styled-component

Que maravilla, un video que te explica el error, angular esta genial

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

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

Se recomienda que establezca una propiedad de elemento con un enlace de propiedad siempre que sea ‚Äč‚Äčposible. Sin embargo, a veces no tiene una propiedad de elemento para enlazar. En esas situaciones, utilice el enlace de atributos.

El enlace de atributos en Angular lo ayuda a establecer valores para los atributos directamente. Con el enlace de atributos, puede mejorar la accesibilidad, dise√Īar su aplicaci√≥n din√°micamente y administrar m√ļltiples clases o estilos CSS simult√°neamente.

Este curso me ayudo mucho

Este es el Curso de Angular Forms: Creación y Optimización de Formularios Web
https://platzi.com/cursos/angular-forms/

mucho desordern

Este curso me ha servido bastante en mi trabajo, es genial, aprendí el comportamiento real de Angular y su estructura.

Mil gracias profe.

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

He presentado varios ex√°menes algunos ganados otros perdidos, y he aprendido en ellos.
Lo que mejor aprend√≠ es que un examen no te hace ni bueno ni malo, no quiere decir que aprendiste o no, pues he ganado ex√°menes y he tenido que regresar nuevamente a los videos a estudiar nuevamente cuando hago algo sin gu√≠a del profesor. Me parece que los ex√°menes sobran, es mejor crear un proyecto as√≠ sea peque√Īo por nuestra cuenta, as√≠ asimilamos lo estudiado. la vieja escuela eval√ļa con examenes.

Nicolas gracias, hace dos a√Īos que no aprend√≠a angular y este curso esta buen√≠simo. Gran trabajo y convenci√≥n de contenidos.

Excelente explicación. Ahora a practicar.

gracias a este curso antes me parecía complicado angular y prefería a React JS, pero ahora entiendo mas y me esta gustando mucho angular

Buen curso, recomendado

Jamas habia visto una explicación de Angular tan clara… Excelente profe.

Excelente video, quedaron muy claros los conceptos ūüéÉ.

Muchas gracias Nicolas Molina, este curso est√° genial. Eres un capo!