El enlace de atributos en Angular le ayuda a establecer valores para attributes directamente. Con attribute vinculante, puede mejorar la accesibilidad, diseñar su aplicación dinámicamente y administrar múltiples clases o estilos CSS simultáneamente.

Vea el ejemplo en vivo para ver un ejemplo funcional que contiene los fragmentos de código en esta guía.

Vinculante a un attribute

Se recomienda que establezca una propiedad de elemento con un enlace de propiedad siempre que sea posible. Sin embargo, a veces no tiene una propiedad de elemento para enlazar. En esas situaciones, puede utilizar attribute vinculante.

Por ejemplo, ARIA y SVG son puramente attributes. Ni ARIA ni SVG corresponden a propiedades de elementos y no establecen propiedades de elementos. En estos casos, debe utilizar attribute vinculante porque no hay objetivos de propiedad correspondientes.

Sintaxis

La sintaxis de enlace de atributo se asemeja al enlace de propiedad, pero en lugar de una propiedad de elemento entre corchetes, antecede el nombre del attribute con el prefix attr, seguido de un punto. Luego, configura el attribute valor con una expresión que se resuelve en un string.

<p[attr.attribute-you-are-targeting]="expression">p>

Cuando la expresión se resuelve en null o undefined, Angular elimina el attribute en total.

Encuadernación ARIA attributes

Uno de los principales casos de uso de attribute vinculante es establecer ARIA attributes, como en este ejemplo:

<button[attr.aria-label]="actionName">actionName with Ariabutton>

Vinculante a colspan

Otro caso de uso común para attribute la unión es con el colspan attribute en tablas. Vinculante al colspan attribute le ayuda a mantener sus tablas dinámicas programáticamente. Dependiendo de la cantidad de datos con los que su aplicación rellene una tabla, la cantidad de columnas que abarca una fila podría cambiar.

Usar attribute vinculante con el

attribute colspan:

  1. Especifica el colspan attribute utilizando la siguiente sintaxis: [attr.colspan].
  2. Colocar [attr.colspan] igual a una expresión.

En el siguiente ejemplo, vinculamos el colspan attribute a la expresión 1 + 1.

<tr><td[attr.colspan]="1 + 1">One-Twotd>tr>

Esta unión hace que el

para abarcar dos columnas.

A veces existen diferencias entre el nombre de la propiedad y un attribute.

colspan es un attribute de

, tiempo colSpan con una “S” mayúscula es una propiedad. Cuando usas attribute vinculante, uso colspan con una “s” minúscula. Para obtener más información sobre cómo enlazar al colSpan propiedad, ver el colspan y colSpan sección de Vinculación de propiedad.

Vinculante al class attribute

Puede utilizar el enlace de clases para agregar y eliminar los nombres de clases CSS de un elemento class attribute.

Enlace a un solo CSS class

Para crear un enlace de clase única, use el prefix class seguido de un punto y el nombre de la clase CSS, por ejemplo, [class.sale]="onSale". Angular agrega la clase cuando la expresión enlazada, onSale es veraz, y elimina la clase cuando la expresión es falsa, con la excepción de undefined. Consulte delegación de estilo para obtener más información.

Enlace a varias clases de CSS

Para enlazar a varias clases, use [class] establecido en una expresión, por ejemplo, [class]="classExpression". La expresión puede ser una de las siguientes:

  • Un espacio delimitado string de nombres de clases.
  • Un objeto con nombres de clase como keys y expresiones de verdad o falsedad como valores.
  • Un array de nombres de clases.

Con el formato de objeto, Angular agrega una clase solo si su valor asociado es verdadero.

Con cualquier expresión similar a un objeto, como object, Array, Map, o Set—La identidad del objeto debe cambiar para que Angular actualice la lista de clases. Actualizar la propiedad sin cambiar la identidad del objeto no tiene ningún efecto.

Si hay varios enlaces al mismo nombre de clase, Angular usa la precedencia de estilo para determinar qué enlace usar.

La siguiente tabla resume la sintaxis de enlace de clases.

Tipo de encuadernación Sintaxis Tipo de entrada Valores de entrada de ejemplo
Enlace de clase única [class.sale]="onSale" boolean | undefined | null true, false
Encuadernación de varias clases [class]="classExpression" string "my-class-1 my-class-2 my-class-3"
Record foo: true, bar: false
Array<string> ['foo', 'bar']

Vinculante al estilo attribute

Puede utilizar el enlace de estilo para establecer estilos de forma dinámica.

Vinculación a un solo estilo

Para crear una encuadernación de estilo único, utilice el prefix style seguido de un punto y el nombre de la propiedad de estilo CSS, por ejemplo, [style.width]="width". Angular establece la propiedad en el valor de la expresión enlazada, que suele ser una string. Opcionalmente, puede agregar una extensión de unidad como em o %, que requiere un tipo de número.

Puede escribir un nombre de propiedad de estilo en dash-case o camelCase.

<nav[style.background-color]="expression">nav><nav[style.backgroundColor]="expression">nav>

Enlace a varios estilos

Para alternar varios estilos, enlazar al [style] attribute-por ejemplo, [style]="styleExpression". los styleExpression puede ser uno de:

  • A string lista de estilos como "width: 100px; height: 100px; background-color: cornflowerblue;".
  • Un objeto con nombres de estilo como keys y valores de estilo como los valores, como width: '100px', height: '100px', backgroundColor: 'cornflowerblue'.

Tenga en cuenta que atar un array para [style] no es apoyado.

Al atar [style] a una expresión de objeto, la identidad del objeto debe cambiar para que Angular actualice la lista de clases. Actualizar la propiedad sin cambiar la identidad del objeto no tiene ningún efecto.

Ejemplo de encuadernación de estilo único y múltiple

@Component(
  selector:'app-nav-bar',
  template:`
`)exportclassNavBarComponent
  navStyle ='font-size: 1.2rem; color: cornflowerblue;';
  linkStyle ='underline';
  activeLinkStyle ='overline';/* . . . */

Si hay varios enlaces al mismo estilo attribute, Angular usa la precedencia de estilo para determinar qué enlace usar.

La siguiente tabla resume la sintaxis de enlace de estilo.

Tipo de encuadernación Sintaxis Tipo de entrada Valores de entrada de ejemplo
Encuadernación de estilo único [style.width]="width" string | undefined | null "100px"
Encuadernación de un solo estilo con unidades [style.width.px]="width" number | undefined | null 100
Encuadernación de varios estilos [style]="styleExpression" string "width: 100px; height: 100px"
Record width: '100px', height: '100px'

La directiva NgStyle se puede utilizar como alternativa a direct [style] fijaciones. Sin embargo, utilizando la sintaxis de enlace de estilo anterior sin NgStyle se prefiere porque debido a las mejoras en el enlace de estilo en Angular, NgStyle ya no proporciona un valor significativo y, eventualmente, podría eliminarse en el futuro.

Precedencia de estilo

Un solo elemento HTML puede tener su lista de clases CSS y valores de estilo vinculados a múltiples fuentes (por ejemplo, enlaces de host de múltiples directivas).

Cuando hay varios enlaces al mismo nombre de clase o propiedad de estilo, Angular usa un conjunto de reglas de precedencia para resolver conflictos y determinar qué clases o estilos se aplican en última instancia al elemento.

Prioridad de estilo (de mayor a menor)

  1. Enlaces de plantilla
    1. Vinculación de propiedad (por ejemplo,
      o

      )
    2. Enlace de mapa (por ejemplo,
      o

      style]="styleExpr">)
    3. Valor estático (por ejemplo,
      o

      style="color: blue">)
  2. Enlaces de host de directivas
    1. Vinculación de propiedad (por ejemplo, host: '[class.foo]': 'hasFoo' o host: '[style.color]': 'color')
    2. Enlace de mapa (por ejemplo, host: '[class]': 'classExpr' o host: '[style]': 'styleExpr')
    3. Valor estático (por ejemplo, host: 'class': 'foo' o host: 'style': 'color: blue')
  3. Enlaces de host de componentes
    1. Vinculación de propiedad (por ejemplo, host: '[class.foo]': 'hasFoo' o host: '[style.color]': 'color')
    2. Enlace de mapa (por ejemplo, host: '[class]': 'classExpr' o host: '[style]': 'styleExpr')
    3. Valor estático (por ejemplo, host: 'class': 'foo' o host: 'style': 'color: blue')

Cuanto más específico sea un enlace de clase o estilo, mayor será su precedencia.

Un enlace a una clase específica (por ejemplo, [class.foo]) tendrá prioridad sobre un genérico [class] encuadernación, y una encuadernación a un estilo específico (por ejemplo, [style.bar]) tendrá prioridad sobre un genérico [style] vinculante.

<h3>Basic specificityh3><div[class.special]="isSpecial"[class]="classExpression">Some text.div><div[style.color]="color"[style]="styleExpression">Some text.div>

Las reglas de especificidad también se aplican cuando se trata de enlaces que se originan en diferentes fuentes. Es posible que un elemento tenga enlaces en la plantilla donde se declara, desde enlaces de host en directivas coincidentes y desde enlaces de host en componentes coincidentes.

Los enlaces de plantilla son los más específicos porque se aplican al elemento directa y exclusivamente, por lo que tienen la mayor prioridad.

Los enlaces de host de directiva se consideran menos específicos porque las directivas se pueden usar en varias ubicaciones, por lo que tienen una precedencia menor que los enlaces de plantilla.

Las directivas a menudo aumentan el comportamiento de los componentes, por lo que los enlaces de host de los componentes tienen la precedencia más baja.

<h3>Source specificityh3><comp-with-host-binding[class.special]="isSpecial"dirWithClassBinding>Some text.comp-with-host-binding><comp-with-host-binding[style.color]="color"dirWithStyleBinding>Some text.comp-with-host-binding>

Además, las vinculaciones tienen prioridad sobre static attributes.

En el siguiente caso, class y [class] tienen una especificidad similar, pero el [class] la vinculación tendrá prioridad porque es dinámica.

<h3>Dynamic vs statich3><divclass="special"[class]="classExpression">Some text.div><divstyle="color: blue"[style]="styleExpression">Some text.div>

Delegar en estilos con menor precedencia

Es posible que los estilos de mayor precedencia “deleguen” en estilos de menor precedencia usando undefined valores. Mientras que establecer una propiedad de estilo en null asegura que se elimine el estilo, configurándolo en undefined hará que Angular retroceda al siguiente enlace de precedencia más alto para ese estilo.

Por ejemplo, considere la siguiente plantilla:

<comp-with-host-bindingdirWithHostBinding>comp-with-host-binding>

Imagina que el dirWithHostBinding directiva y la comp-with-host-binding ambos tienen un componente [style.width] unión del anfitrión. En ese caso, si dirWithHostBinding establece su enlace a undefined, los width la propiedad volverá al valor de la comp-with-host-binding unión del anfitrión. Sin embargo, si dirWithHostBinding establece su enlace a null, los width La propiedad se eliminará por completo.

Inyectando attribute valores

Hay casos en los que es necesario diferenciar el comportamiento de un componente o directiva en función de un static valor establecido en el elemento host como HTML attribute. Por ejemplo, es posible que tenga una directiva que necesite conocer el type de un