How to bind dynamic data to aria-label?

Just use attr. before aria-label:

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

[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

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

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

Related