Wrong usage of HostBinding in example code

[karnkumar123]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

getter method is missing in hostbinding examples here https://angular.dev/guide/components/host-elements

Please provide a link to a minimal reproduction of the bug

https://angular.dev/guide/components/host-elements

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular18

Anything else?

No response

[jnizet]

The tabindex indeed doesn't change if @HostBinding decorates a method rather than a getter. And I've always wondered why. If the same method is used as the value of a host metadata instead, it works fine. See https://stackblitz.com/edit/stackblitz-starters-pwbb92?file=src%2Fmain.ts

[jdegand]

@jnizet I looked into this and I think it is because of change detection. Getters are evaluated as part of Angular’s change detection cycle. However, when you use @HostBinding with a method, Angular doesn’t automatically call the method during change detection, so it can’t update the host element based on the method’s return value.

[jnizet]

@jdegand Sure, but I wonder why it doesn't do it.

[jdegand]

I think tabindex is a considered an attribute and not a property. Even if you manually trigger change detection with ChangeDetectorRef and call detect changes or mark for check inside update, it won't work because you can't bind to tabindex. You have to use @HostBinding('attr.tabIndex').

[jnizet]

Nope: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex.

[jdegand]

Well, it is both an attribute and a property. When you reference the HTML template, it is considered an attribute. For the TypeScript code, it is considered a property.

Check out this issue for further distinction between @Attribute and @HostBinding.

[JeanMeche]

The root issue is that HostBindings must be properties or getters as their value isn't invoked. I've sent it #63509 to update the guide.

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