La NgClass directiva te permite configurar la clase CSS de forma dinámica para un elemento DOM .
Primeros pasos
Qué es Angular y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Deploy
Despliegue con Firebase Hosting
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
NgClass y NgStyle
18/21Recursos
Con el binding de [class] y [style] puedes agregar clases y estilos fácilmente. Pero se vuelve algo complicado en el caso de que necesites agregar varias clases o modificar muchos estilos. Es por esto que Angular ofrece las directivas ngClass y ngStyle para este propósito.
Puedes bindear la directiva [ngStyle] o [ngClass] y pasarle un objeto con cada propiedad o clase que deseas agregar:
<p
[ngStyle]="{
'color': textColor,
'background': textBackground
}"
></p>
El operador ternario será tu mejor aliado para agregar o quitar clases y estilos:
<div
[ngClass]="isAvailable ? 'active-class' : 'deactivate-class'"
></div>
O puedes usar las Interpolaciones en lugar del binding:
<p
ngClass="{{ isAvailable ? 'active-class' : 'deactivate-class' }}"
></p>
Aporte creado por: Kevin Fiorentino.
Aportes 10
Preguntas 1
Ordenar por:
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
La NgStyle directiva te permite establecer propiedades de estilo de elementos DOM determinados .
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.
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ó 😄
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>
Que buen curso!
Is magic
bastante picante esta clase amigos!
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! 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.