Saltar al contenido

Atributos, clase y estilo en las uniones angulares

La vinculación de clase se utiliza para establecer una propiedad de clase de un elemento de vista. Podemos añadir y eliminar los nombres de clase CSS del atributo de clase de un elemento con la vinculación de clase.

La sintaxis de la unión de clases es también como la unión de propiedades. En la vinculación de propiedades, sólo especificamos el elemento entre paréntesis. Pero en el caso de la vinculación de clase, comienza con el prefijo clase, seguido de un punto (.), y el nombre de la clase. Luego se vincula el valor de la clase con el nombre de la clase CSS como class.class-name .

Atributos, clase y estilo en las uniones angulares
Atributos, clase y estilo en las uniones angulares

El ejemplo que figura a continuación muestra la forma estándar de establecer el atributo de clase sin vinculación. En este caso, estamos estableciendo un atributo de clase con un nombre de clase “myClass” sin vinculación.

1<div...Establecer la clase sin ataduras</div...

html

El ejemplo siguiente muestra la configuración de todos los valores de clase con la vinculación. En este caso, estamos vinculando la clase “myClassBinding” con la vinculación de clase.

1<div[class]="myClassBinding";Estableciendo todas las clases con binding</div;

html

Siempre que la expresión de la plantilla se evalúa como verdadera, Angular vincula ese nombre de clase a la vinculación de la clase. Elimina la clase cuando la expresión de la plantilla se evalúa como falsa.

Veamos otro ejemplo en el que estamos vinculando un nombre de clase específico con la vinculación de clase. En este caso, si el valor de “isTrue” se evalúa como verdadero, entonces vinculará a “myClass” a una propiedad de clase. Si se evalúa como falso, entonces no se vinculará el “myClass” a una propiedad de clase.

Nombre del archivo: example.component.ts

1234567891011121314importación{Componente}de"@angular/núcleo";@Componente({ selector:$0027app-example$0027, plantilla:` ` <div> <h1 [class.myClass]="isTrue"`;Esta vinculación de clase es para el valor verdadero</h1> <h1 [clase. myClass]="!isTrue"³;Esta clase vinculante es para el valor falso</h1;³;/div;`})exportclassExampleComponent{ isTrue_boolean=true;}

typeScript

Mientras que la unión de clases es una buena forma de unión, la directiva ngClass es preferible para manejar varios nombres de clases al mismo tiempo.