@HostBinding binds do DOM properties according to documentation What about class?

[Sebi2020]

Description

The documentation currently states:

Decorator that marks a DOM property as a host-binding property and supplies configuration metadata

but HostBinding also allows this:

@HostBinding('class.valid') isValid:boolean = false

But class IS NOT a DOM property in contrast to what the documentation says about @HostBinding. It's an attribute, but @HostBinding usually does not work with attributes, if not prefixed with attr (like attr.class). element.class as a DOM property neither exists in JavaScript nor in TypeScript (See HTMLElement)

For example, try to use @HostBinding('aria-expanded') for conditionally attaching an attribute to an element (you have to use @HostBinding('attr.aria-expanded') which is not a DOM property.

What is the affected URL?

https://angular.io/api/core/HostBinding

Please provide the steps to reproduce the issue

See description

Please provide the expected behavior vs the actual behavior you encountered

Either @HostBinding should only bind to properties, to attributes or to both in general. The actual behaviour allows both without a prefix in specific edge cases. You can bind to the class attribute without attr prefix, but not to other attributes and you can bind to properties in general. This should be clearified in the documentation or @HostBinding should have a consistent behaviour.

Please provide a screenshot if possible

N/A

Please provide the exception or error you saw

See Description

Is this a browser-specific issue? If so, please specify the device, browser, and version.

No

[pkozlowski-opensource]

Angular has a special treatment for class / style bindings (as mentioned in https://angular.io/guide/attribute-binding). Having said this I agree that the description might be imprecise and confusing.

Essentially @HostBinding accepts everything that can go into [validHere]="exp". Because of this we can also binds to attributes, ex.: https://stackblitz.com/edit/angular-ivy-ewpybk

Marking this as a documentation issue so we can improve the wording.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}