Angular notes

DOM Attributes and properties

HTML has DOM attributes and corresponding JavaScript properties, but not all html attributes have corresponding properties; in the case of class, it’s property name is className as class is a reserved word in JavaScript.

• Elm: Properties vs. Attributes

Angular 8 example:

<foo-component
[attr.aria-labelledby]="dialogTitleId"
class="foo"
[dialogInstance]="this"
>
...
</foo-component>

If I were to pass aria-labelledby, that doesn't work as (I think) it does not correspond to standard DOM property.

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.

– https://stackoverflow.com/a/55517189/922323

Note: Apparently, if you use square brackets around an attribute, TypeScript (or Angular?) assumes the value is will be a variable to parse; if it’s not a variable, you have to wrap the value in single quotes ([attr.aria-labelledby]="'not a variable'"), or make it a var.