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?

Bruno João · Accepted Answer · 2020-02-15T19:50:53.497

222

Just use attr. before aria-label:

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

or

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

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

edited Feb 15 '20 at 19:50

answered Mar 07 '17 at 21:45

Bruno João

3

it should be `[attr.aria-label]="productDetails?.ProductName"` – Luca De Nardi May 27 '19 at 09:11
@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. – Bruno João Jul 10 '19 at 12:56
4

@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. – Luca De Nardi Jul 11 '19 at 13:09
2

@LucaDeNardi thanks for letting me know. I've removed the brackets. – Bruno João Jul 11 '19 at 17:34
@BrunoJoão the ideal way is to use square brackets. – River CR Phoenix Oct 01 '19 at 08:24
1

if anyone is wondering, works for labelledby as well: `[attr.aria-labelledby]` – Bullsized Feb 14 '23 at 09:47

score 7 · Answer 2 · answered Jul 02 '19 at 18:57

7

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

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

answered Jul 02 '19 at 18:57

Kabb5

Nɪsʜᴀɴᴛʜ ॐ · Answer 3 · 2021-02-23T08:15:41.870

4

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..

edited Feb 23 '21 at 08:15

answered Feb 23 '21 at 08:08

score -2 · Answer 4 · edited Oct 01 '20 at 13:33

-2

this works for me without [].

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

edited Oct 01 '20 at 13:33

Yuri

answered Jul 05 '20 at 19:37

MMGuz

4 Answers4