Agregar Clase a un Elemento en Angular

1. Agregar clases sin Angular 4
2. Agregar clase a un elemento usando la propiedad ClassName en Angular 4
3. Agregar clase a un elemento usando la directiva NgClass en Angular 4

Angular 4 es un framework para construir aplicaciones web. Está construido en TypeScript y tiene muchas características que lo hacen más potente y flexible que Angular 2.

Una de las características que hacen que Angular 4 sea más poderoso es el concepto de agregar clases a un elemento.

La forma más fácil de agregar una clase a un elemento en Angular 4 es usando la sintaxis del selector de atributos HTML con la directiva NgClass.

Esta sintaxis se puede usar en cualquier etiqueta HTML y le permite aplicar varias clases a la vez, que luego se pueden aplicar según sea necesario mediante otras directivas o reglas de hojas de estilo.

Este artículo cubrirá a fondo la adición de una clase a un elemento en Angular 4.

Antes de hacerlo, examinaremos cómo se asignan las clases usando JavaScript tradicional en comparación con cómo se asignan en Angular.

Agregar clases sin Angular 4

La popular biblioteca de JavaScript Angular proporciona una forma de hacer esto utilizando la directiva NgClass. Esta directiva le permite agregar y eliminar clases de un elemento con facilidad de forma dinámica.

Sin embargo, si no está utilizando Angular, hay algunas otras formas de usar JavaScript para realizar esta tarea.

Un complemento de jQuery llamado addClass le permite agregar fácilmente una clase a cualquier elemento siempre que se haya inicializado con jQuery. También puede usar el método .setAttribute() en JavaScript y establecer la propiedad className en el nodo DOM que se está manipulando.

Agregar clase a un elemento usando la propiedad ClassName en Angular 4

Para vincular directamente a la propiedad className en Angular 4, usaremos la propiedad ClassName. Añade clases a cualquier elemento, a las que se accede mediante corchetes después del selector o mediante la sintaxis de puntos ClassName.

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

Si isActive devuelve verdadero, se agrega la clase activa; de lo contrario, inactivo sigue siendo el mismo.

Agregar clase a un elemento usando la directiva NgClass en Angular 4

Hay muchos casos de uso para la directiva NgClass. Uno de los más comunes es agregar una clase a un elemento cuando un usuario hace clic en él.

La directiva NgClass le permite agregar clases a un elemento en función de ciertas condiciones. Por ejemplo, cuando un usuario hace clic en un componente, puede agregar la clase activa a ese elemento.

La directiva NgClass es útil porque le permite agregar y eliminar dinámicamente clases de elementos en su aplicación Angular. Además, la directiva en sí es altamente adaptable y hace varias cosas en función de la entrada.

Por ejemplo, supongamos que queremos asignar una clase estática usando NgClass. Analicemos su sintaxis.

<div [ngClass]="'Class-Name'">/div>

NgClass también puede asignar numerosos nombres de clase estáticos simultáneamente.

<div [ngClass]="['Class-Name', 'other-class']">/div>

Ejemplo completo de agregar clases a un elemento en Angular 4

Código HTML:

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

Código CSS:

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

Código TypeScript:

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

Haga clic aquí para ver la demostración en vivo de los ejemplos mencionados anteriormente.