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.

Binding ARIA attributes

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

<!-- create and set an aria attribute for assistive technology -->
<button type="button" [attr.aria-label]="actionName">{{actionName}} with Aria</button>

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.

<!--  expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>

export class CoursesComponent{
    imageUrl = "https://picsum.photos/200";
    colSpan = 3;
}

HTML

<img [src]="imageUrl" />
<table>
    <tr>
        <td [attr.colspan]="colSpan"></td>
    </tr>
</table>