Añadir Clase en Angular

1. Agregar Clase Estática o Dinámica en Angular
2. Usando el NgClass en Angular

Presentaremos diferentes métodos como className y ngClass para agregar clases estáticas o dinámicas en Angular. También presentaremos cómo alternar clases en Angular.

Agregar Clase Estática o Dinámica en Angular

Las clases son la parte principal de cualquier aplicación web. Diseñamos y realizamos diferentes funciones en función de su nombre de clase.

Al igual que los marcos de aplicaciones de una sola página, Angular brilla cuando se trata de enlace de datos. Los elementos DOM se actualizan automáticamente si hay algún cambio en el objeto JavaScript correspondiente.

Vamos a crear una nueva aplicación usando el siguiente comando.

# angular
ng new my-app

Después de crear nuestra nueva aplicación en Angular, iremos al directorio de nuestra aplicación usando este comando.

# angular
cd my-app

Ahora, ejecutemos nuestra aplicación para verificar si todas las dependencias están instaladas correctamente.

# angular
ng serve --open

Podemos vincular nuestros nombres de clase a cualquier elemento HTML como solemos agregar un nombre de clase en HTML. La única diferencia es que usamos className en lugar de class, como se muestra a continuación.

# angular
<div [className]="'my-class'"></div>

El código anterior muestra que es solo una clase estática asignada a un elemento div. Ahora analicemos cómo podemos agregar clases dinámicas usando className.

Como se muestra a continuación, podemos cambiar o agregar clases a un elemento en función de una condición.

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

Cuando la condición loggedIn sea true, asignará la clase logged-class. Si la condición es false, asignará la clase my-class.

También podemos crear un nombre de clase en tiempo de ejecución, como se muestra a continuación.

# angular
<div [className]="'class' + myValue"></div>

El ejemplo anterior muestra que agregamos una cadena class y un valor myValue, que puede ser cualquier cosa en tiempo de ejecución y hacer un nombre de clase.

Usando el NgClass en Angular

La ngClass es una directiva que se usa para hacer que el código se vea más simplificado porque es solo azúcar sintáctico. Es conveniente y más corto de usar.

El ngClass es muy versátil. Entonces, veamos cómo podemos usar ngClass, como se muestra a continuación.

# angular
<div [ngClass]="'myclass'"></div>

El ngClass también nos ayuda a agregar más de un nombre de clase, como se muestra a continuación.

# angular
<div [ngClass]="['my-class','second-class']"></div>

También podemos usar condiciones para asignar nombres de clase y alternarlos según las condiciones, como se muestra a continuación.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

Como se muestra a continuación, también podemos asignar varias clases en función de dos condiciones diferentes.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

También podemos usar dos condiciones diferentes, como se muestra a continuación.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

Entonces, de esta manera, podemos asignar clases fácilmente en función de las condiciones usando ClassName y ngClass. También aprendimos a agregar clases dinámicas, estáticas o múltiples usando directivas Angular.