Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Component decorator host property. #1730

Open
2 tasks done
x-strong opened this issue Jul 29, 2022 · 3 comments
Open
2 tasks done

Add support for Component decorator host property. #1730

x-strong opened this issue Jul 29, 2022 · 3 comments
Labels

Comments

@x-strong
Copy link

x-strong commented Jul 29, 2022

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
Copy link
Collaborator

atscott commented Jul 29, 2022

Yep, I think this is a good idea and really shouldn鈥檛 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
Copy link

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
Copy link

zwarag commented Feb 29, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants