Class and style

Clase 17 de 21 • Curso de Fundamentos de Angular

Contenido del curso

Primeros pasos

Comunicación de datos

Estructuras de control

Estilos

Deploy

20
Despliegue con Firebase Hosting
09:48 min

Despedida

21
Continúa con el Curso de Angular: Componentes y Servicios
00:57 min

Tomar examen

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.

German Pinilla

student•

++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:

Japheth Calzada López

Nicolas Molina

teacher•

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

jav rba

Gilberto Espinoza Maciel

Victor Marquez

Reinaldo Mendoza

Danilo Fandiño

Jimmy Buriticá Londoño

Diego 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

Andrés Felipe Eslava Zuluaga

Class and style

Primeros pasos

Qué es Angular: ventajas 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

Deploy

Despliegue con Firebase Hosting

Despedida

Continúa con el Curso de Angular: Componentes y Servicios