Add support for Component decorator host property.

[x-strong]

Is your feature request related to a problem? Please describe.

🚀 feature request

Description

Add support for the host configuration item of Component decorator:

1. @Component({
2.   host: {
3.    '[class.dragging]': 'dragging',
4.   }
5. })
6. class DraggableComponent {
7.    public dragging = true;
8. }

Feature Type

What does this bug affect

• Angular Language Service VSCode extension
• Angular Language Service server

Describe the solution you'd like

Take the code given before as an example, the 'dragging' property in line 3 should can be auto completed, highlighted, navigate to, rename, and show comment popup when mouse hover.

Further more, description specific to key in the pattern supported by Angular (for example, '[class.dragging]' means add CSS class dragging to the host element when the value (here, is the dragging property of the component) evaluates to true, and removed when evaluates to false) of host should be popup as common document.

Describe alternatives you've considered

Anything else relevant?

Reference the JetBrains WebStorm Dev Experience.

[atscott]

Yep, I think this is a good idea and really shouldn’t be too hard to implement (famous last words). We have all the pieces in other places - they just need to be put together in the host meta as well.

Edit: After investigation is non-trivial. The host bindings are not type-checked at all today like the templates are. There is no compiler support for adding this to the language service and would require a fair bit of work.

[dasco144]

Is there a plan to add this support in the future? With the docs now recommending this approach for host binding (over the decorator), this feels like a bit of a gap.

Always prefer using the host property over [@HostBinding](https://angular.dev/api/core/HostBinding) and [@HostListener](https://angular.dev/api/core/HostListener). These decorators exist exclusively for backwards compatibility.

[zwarag]

Looks like there is a contradiction in the docs.

Consider preferring the @HostListener and @HostBinding to the host property of the @directive and @component decorators.

https://angular.dev/style-guide#style-06-03

[danny-huang-openfind]

Looks like there is a contradiction in the docs.

Consider preferring the @HostListener and @HostBinding to the host property of the @directive and https://github.com/component decorators.

Looks like this contradiction has been tracked in angular/angular#52561 and will be fixed in angular/angular#54284, so again, will this feature release in the future? cause this can be an urgent need someday.

[SeraphyBR]

👀

[atscott]

This should be available in the latest release (v20)

[angular-automatic-lock-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.}