Using aria attribute in Angular component causes error

Question

I have a clickable card that I would like to make into a component. I want to create an @Input for the unique name (id) of the instance do that I can use aria-labelledby on the card's title:

    <div
      class="card card-default category-widget"
      id="{{ widgetID }}"
      matRipple
      aria-labelledby="{{widgetTitle}}"
      role="button"
      tabindex="0"
    >
      <div class="card-body category-widget-icon" aria-hidden="true">
        <i class="pbi-icon-outline pbi-wifi"></i>
      </div>
      <div class="card-footer">
        <h4 class="category-widget-title" id="{{ widgetTitle }}">Widget Title</h4>
        <p class="category-widget-description">
          Widget description text
        </p>
      </div>
    </div>

Except this throws the error:

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

Without the aria-labelledby , the component works fine.

Answer 1

Instead use [attr.aria-labelledby]="widgetTitle" because it's an adhoc attribute. Angular doesn't bake in anything for many attributes like it does for DOM properties, etc. So things like ARIA or say, data-* attributes need to be specified as an attribute via attr. and a one way binding.