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?

Distributary

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

Partridgeberry

it should be [attr.aria-label]="productDetails?.ProductName" – Lattimer

@LucaDeNardi, actually, your way is less readable and you forgot to add the static string part Product details for.... I've added your suggested selector for anyone who wants the best fit for their case. – Eddyede

@BrunoJoão sorry, I meant that you should not use [attr.aria-label] and {{productDetails}} together, since the square brackets already resolve variables. You either write your attribute without square brackets and with curly brackets, or your attribute with square brackets and without curly ones. – Lattimer

@LucaDeNardi thanks for letting me know. I've removed the brackets. – Eddyede

@BrunoJoão the ideal way is to use square brackets. – Gervais

if anyone is wondering, works for labelledby as well: [attr.aria-labelledby] – Dose

Answer 2

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

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

Nerty

Answer 3

Also this could be further checked if ProductName in productDetails is null or undefined as

[attr.aria-label]="(typeof productDetails.ProductName !== 'undefined') ? 
'Product details for ' + productDetails.ProductName : '' "

So that the JAWS/NVDA/Narrator could able to read if it's value is present or not..

Woollyheaded

Answer 4

this works for me without [].

attr.aria-labelledby="navbarDropdownMenuLink{{ i }}"

Mesomorph