In-depth Guides
Template Syntax

Attribute binding

Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.

Syntax

Attribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot. Then, you set the attribute value with an expression that resolves to a string.

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

HELPFUL: When the expression resolves to null or undefined, Angular removes the attribute altogether.

Binding ARIA attributes

One of the primary use cases for attribute binding is to set ARIA attributes.

To bind to an ARIA attribute, type the following:

src/app/app.component.html

      
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr>
  -->
  <!-- Notice the colSpan property is camel case -->
  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
<div>
  <!-- create and set an aria attribute for assistive technology -->
  <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
</div>
<hr />
<h2>Styling precedence</h2>
<h3>Basic specificity</h3>
<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
<div [style.border]="border" [style]="styleExpression">Some text.</div>
<h3>Source specificity</h3>
<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<div>
  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
</div>
<h3>Dynamic vs static</h3>
<!-- If `[class.special]` equals false, this value overrides the `class="special"` below -->
<div class="special" [class.special]="false">Some text.</div>
<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
<div class="readability">
  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
</div>
<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>

Binding to colspan

Another common use case for attribute binding is with the colspan attribute in tables. Binding to the colspan attribute helps you to keep your tables programmatically dynamic. Depending on the amount of data that your application populates a table with, the number of columns that a row spans could change.

To use attribute binding with the <td> attribute colspan

  1. Specify the colspan attribute by using the following syntax: [attr.colspan].
  2. Set [attr.colspan] equal to an expression.

In the following example, you bind the colspan attribute to the expression 1 + 1.

src/app/app.component.html

      
<h1>Attribute, class, and style bindings</h1>
<h2>Attribute binding</h2>
<table border=1>
  <!--  expression calculates colspan=2 -->
  <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
  <!-- ERROR: There is no `colspan` property to set!
    <tr><td colspan="{{ 1 + 1 }}">Three-Four</td></tr>
  -->
  <!-- Notice the colSpan property is camel case -->
  <tr><td [colSpan]="1 + 1">Three-Four</td></tr>
  <tr><td>Five</td><td>Six</td></tr>
</table>
<div>
  <!-- create and set an aria attribute for assistive technology -->
  <button type="button" [attr.aria-label]="actionName">{{ actionName }} with Aria</button>
</div>
<hr />
<h2>Styling precedence</h2>
<h3>Basic specificity</h3>
<!-- The `class.special` binding overrides any value for the `special` class in `classExpression`.  -->
<div [class.special]="isSpecial" [class]="classExpression">Some text.</div>
<!-- The `style.border` binding overrides any value for the `border` property in `styleExpression`.  -->
<div [style.border]="border" [style]="styleExpression">Some text.</div>
<h3>Source specificity</h3>
<!-- The `class.special` template binding overrides any host binding to the `special` class set by `dirWithClassBinding` or `comp-with-host-binding`.-->
<comp-with-host-binding [class.special]="isSpecial" dirWithClassBinding></comp-with-host-binding>
<!-- The `style.color` template binding overrides any host binding to the `color` property set by `dirWithStyleBinding` or `comp-with-host-binding`. -->
<div>
  <comp-with-host-binding [style.color]="color" dirWithStyleBinding></comp-with-host-binding>
</div>
<h3>Dynamic vs static</h3>
<!-- If `[class.special]` equals false, this value overrides the `class="special"` below -->
<div class="special" [class.special]="false">Some text.</div>
<!-- If `styleExpression` has a value for the `border` property, this value overrides the `style="border: dotted darkblue 3px"` below -->
<div style="border: dotted darkblue 3px" [style]="styleExpression">Some text.</div>
<div class="readability">
  <comp-with-host-binding dirWithHostBinding></comp-with-host-binding>
</div>
<app-my-input-with-attribute-decorator type="number"></app-my-input-with-attribute-decorator>

This binding causes the <tr> to span two columns.

HELPFUL: Sometimes there are differences between the name of property and an attribute.

colspan is an attribute of <td>, while colSpan with a capital "S" is a property. When using attribute binding, use colspan with a lowercase "s".

For more information on how to bind to the colSpan property, see the colspan and colSpan section of Property Binding.

What’s next