html - How to bind dynamic data to aria-label?

Question

I have dynamic text to bind to aria-label on a HTML page. This is an Angular 2 app. I am using something like this:

aria-label="Product details for {{productDetails?.ProductName}}"

But I get an error:

Can't bind to 'aria-label' since it isn't a known property of 'div'.

Is there any workaround for this?

Answer 1

Just use attr. before aria-label:

attr.aria-label="Product details for {{productDetails?.ProductName}}"

or

[attr.aria-label]="'Product details for ' + productDetails?.ProductName"

Examples here: https://stackblitz.com/edit/angular-aria-label?embed=1&file=src/app/app.component.html&hideExplorer=1

Ps. As @Simon_Weaver mentioned, there are some components that implements its own aria-label @Input, like mat-select.

See his answer here Angular Material mat-label accessibility