How to associate dynamic data with ARIA-LABEL?

Question

I have dynamic text to bind to ARIA-LABEL on an html page. This is an angular 2 app. I'm using something like this: aria-label = "Product Details for {{productDetails? .ProductName}}"

But I get an error - Unable to bind to 'aria-label', as this is not a known property of 'div'.

Is there any workaround for this?

Answer 1

Just use attr. to 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

Answer 2

You must use square brackets ( [ ] ) around the target property:

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