Estilos condicionales en Angular con la directiva ngClass
En el tutorial de hoy te mostraré cómo utilizar los estilos condicionales en Angular utilizando la directiva ngClass. Esta es una técnica muy útil si estás comenzando en Angular y quieres aplicar diferentes estilos según condiciones específicas.
Angular
Antes de adentrarnos en los estilos condicionales, permíteme explicarte brevemente qué es Angular. Angular es un framework JavaScript (TypeScript) desarrollado por Google para la construcción de aplicaciones web, móviles o de escritorio. Es ampliamente conocido y utilizado en la industria, con más de 71.000 estrellas en GitHub. Angular es mantenido por el equipo de Angular en Google y cuenta con el apoyo de una comunidad muy activa.
Si tienes interés en el desarrollo web, es fundamental que aprendas Angular, ya que es uno de los frameworks de JavaScript más populares y demandados en la actualidad.
Antes de empezar
Antes de comenzar con el tutorial, asegúrate de tener los siguientes requisitos:
- Un entorno de desarrollo integrado como Visual Studio Code (VS Code).
- La versión 11.0 o superior de Node.js instalada en tu máquina.
- Node Package Manager (NPM) en su versión 6.7 o superior (generalmente viene incluido con la instalación de Node.js).
- Angular CLI en su versión 8.0 o superior.
- La última versión de Angular.
- Para este tutorial, descargaremos un ejemplo básico que te servirá como punto de partida para trabajar.
- Un conocimiento básico de Angular.
Asegúrate de cumplir con todos estos requisitos antes de continuar con el tutorial.
Uso de clases CSS en Angular
Para aplicar estilos a los elementos de tu componente Angular, puedes utilizar CSS de diferentes formas. Puedes incluir estilos en un archivo external como en el ejemplo style.css, o también puedes aplicar estilos en línea utilizando el atributo style en tus etiquetas HTML. A continuación, se muestra un ejemplo de un párrafo con una clase CSS que lo hace verde:
<p class="verde">Texto de ejemplo</p>En este caso, se ha definido una clase CSS llamada verde que aplica el color verde al texto dentro del párrafo.
Estilos condicionales
Ahora sí, llegamos a la parte interesante: los estilos condicionales en Angular. La directiva ngClass nos permite aplicar clases CSS de forma condicional, es decir, dependiendo del valor de una expresión o condición.
Por ejemplo, imagina que tienes una lista de elementos y quieres resaltar aquellos que cumplen cierta condición. Puedes hacerlo fácilmente utilizando la directiva ngClass de la siguiente manera:
<ul><li [ngClass]="{'resaltado': elemento.cumpleCondicion}">Elemento 1</li>
<li [ngClass]="{'resaltado': elemento.cumpleCondicion}">Elemento 2</li>
<li [ngClass]="{'resaltado': elemento.cumpleCondicion}">Elemento 3</li>
</ul>
En este ejemplo, se ha creado una lista de elementos. La clase CSS resaltado se aplicará a aquellos elementos que cumplan la condición especificada en la propiedad cumpleCondicion del objeto elemento. De esta manera, podrás resaltar visualmente los elementos que cumplan la condición deseada.
Con la directiva ngClass, las posibilidades de aplicar estilos condicionales son infinitas. Puedes combinar diferentes condiciones y aplicar estilos de forma dinámica en función de la interacción del usuario o la lógica de tu aplicación.
Espero que este tutorial te haya sido de utilidad para comprender cómo utilizar los estilos condicionales en Angular con la directiva ngClass. ¡Ahora puedes darle vida a tus aplicaciones con estilos dinámicos y personalizados!
El Estilo Condicional en Angular con ngClass
Una de las funcionalidades más interesantes que ofrece Angular es la posibilidad de aplicar estilos condicionales a los elementos HTML. Esto se logra gracias a la directiva ngClass, la cual permite añadir y eliminar clases CSS en función de una determinada condición.
Cuando hablamos de estilo condicional, nos referimos a la capacidad de aplicar estilos a un elemento en base a condiciones predefinidas. Por ejemplo, podemos cambiar el estilo de un elemento cuando el ratón tiene el foco, se realiza un clic o se produce algún tipo de interacción.
En CSS, este tipo de comportamiento se logra utilizando pseudoclases que son nativas del navegador. Sin embargo, ¿qué ocurre si deseamos aplicar estilos condicionales con condiciones personalizadas que no están disponibles de forma nativa como pseudoclases CSS?
Utilizando ngClass en Angular
El equipo de Angular ha lanzado la directiva ngClass para ayudar a los desarrolladores a añadir y eliminar clases CSS en elementos HTML. La directiva ngClass se puede utilizar de tres formas diferentes, dependiendo del tipo de evaluación que se desee realizar:
- String: En este caso, las clases CSS se enumeran en una cadena de texto y se separan por espacios, al igual que se haría en cualquier elemento HTML.
- Array: Aquí se enumeran las clases CSS en un array.
- Objeto: Permite definir las clases que se aplicarán a un elemento utilizando un objeto. Las claves del objeto son las clases CSS que se añadirán cuando la expresión evaluada sea verdadera, y se eliminarán de lo contrario.
Ejemplo de uso de ngClass
Supongamos que tenemos una aplicación en Angular que muestra y estiliza cursos técnicos en un portal universitario. A continuación, se muestra un ejemplo de cómo utilizar ngClass en esta aplicación:
- Descarga y descomprime el proyecto de Angular desde GitHub.
- Abre el archivo
app.component.htmly límpialo para que esté vacío. - Crea un nuevo componente llamado
coursesejecutando el siguiente comando en tu terminal:
“`
ng generate component courses
“`
Abre el archivo courses.component.ts y reemplaza el código existente por el siguiente bloque:
En este componente, he creado una array de objetos de todos los cursos técnicos y sus distintos niveles para el semestre. Lo siguiente es definir los distintos estilos que se necesitan para este ejercicio. Abre el archivo courses.component.css y pega en él las reglas CSS que aparecen a continuación:
.codigo {
font-family: Arial, sans-serif;
background-color: #eeeeee;
padding: 10px;
border-radius: 5px;
}
.curso-basico {
color: green;
}
.curso-intermedio {
color: blue;
}
.curso-avanzado {
color: red;
}
Ahora, para la presentación, ve al archivo courses.component.html y sustituye el contenido del marcador de posición por el bloque de código que hay dentro de él:
<div class="codigo">
<h2>Cursos Técnicos</h2>
<ul>
<li *ngFor="let curso of cursos" [ngClass]="{'curso-basico': curso.nivel === 'Basico', 'curso-intermedio': curso.nivel === 'Intermedio', 'curso-avanzado': curso.nivel === 'Avanzado'}">
{{ curso.nombre }} - {{ curso.nivel }}
</li>
</ul>
</div>
Si ejecutas ahora la aplicación, verás que se reflejan todos los estilos, incluido el de la directiva ngClass.
Utilizando este mismo código de presentación, veamos cómo le irá si la definición es un array.
<div class="codigo">
<h2>Cursos Técnicos</h2>
<ul>
<li *ngFor="let curso of cursos" [ngClass]="{'curso-basico': curso.nivel === 'Basico', 'curso-intermedio': curso.nivel === 'Intermedio', 'curso-avanzado': curso.nivel === 'Avanzado'}">
{{ curso.nombre }} - {{ curso.nivel }}
</li>
</ul>
</div>
Cuando lo guardes y mires en tu navegador, tu aplicación seguirá siendo la misma, validando la definición del array. Ahora, para probar la definición del objeto, vamos a empezar con el mismo ejemplo:
<div class="codigo">
<h2>Cursos Técnicos</h2>
<ul>
<li *ngFor="let curso of cursos" [ngClass]="{'curso-basico': curso.nivel === 'Basico', 'curso-intermedio': curso.nivel === 'Intermedio', 'curso-avanzado': curso.nivel === 'Avanzado'}">
{{ curso.nombre }} - {{ curso.nivel }}
</li>
</ul>
</div>
Esto imprime los párrafos con los distintos colores asignados. Para que esto sea aún más emocionante, vamos a hacer referencia a los cursos que guardamos al principio:
<div class="codigo">
<h2>Cursos Técnicos</h2>
<ul>
<li *ngFor="let curso of cursos" [ngClass]="{'curso-basico': curso.nivel === 'Basico', 'curso-intermedio': curso.nivel === 'Intermedio', 'curso-avanzado': curso.nivel === 'Avanzado'}">
{{ curso.nombre }} - {{ curso.nivel }}
</li>
</ul>
</div>
Aquí utilizamos la directiva ngFor para recorrer la lista y, a continuación, con la ngClass, especificamos exactamente que todos los cursos debían colorearse según nuestras condiciones predefinidas (los cursos para principiantes en verde, los intermedios en azul y los avanzados en rojo). Esto fue posible porque la clave del objeto es de tipo booleano, por lo que todo lo que está en el lado derecho tiene que devolver verdadero o falso. El estilo se aplica si es verdadero, y no se aplica cuando devuelve falso.
Conclusión
Este es un caso de uso de la directiva ngClass. Se puede utilizar en muchos escenarios, especialmente en aquellos que requieren que se estilice un elemento en función de una lógica predefinida. Este tutorial te ha introducido en el mundo del estilo condicional con ngClass en Angular. ¡Espero que te haya servido de mucho!