angular / vscode-ng-language-service

Angular extension for Visual Studio Code
MIT License
777 stars 116 forks source link

Add support for Component decorator host property. #1730

Open x-strong opened 2 years ago

x-strong commented 2 years ago

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

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 commented 2 years ago

~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 commented 8 months ago

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 commented 7 months ago

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 commented 4 months ago

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.