question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature request: allow use of host property in @Component if values are strings

See original GitHub issue

I would like a way to allow using the host property in component/directive decorators as long as the keys are being set to string values. For example, this code:

@Component({
  selector: 'my-component',
  host: {
    class: 'some-base-class some-modifier-class other-modifier-class'
  }
})
class MyComponent {}

seems more readable than:

@Component({
  selector: 'my-component'
})
class MyComponent {
  @HostBinding('class.some-base-class')
  someBaseClass = true;

  @HostBinding('class.some-modifier-class')
  someModifierClass = true;

  @HostBinding('class.other-modifier-class')
  otherModifierClass = true;
}

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:15
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
lazarljubenoviccommented, Sep 12, 2018

I disabled this lint rule since there is 0 argument for avoiding host when binding literals. I often bind tabindex or aria-* o role up there. It makes much more sense than polluting the class with public stuff all over the place just to bind to the host. If we could have what the issue suggests, it would be useful again.

4reactions
FirstVertexcommented, Sep 12, 2018

It’s super annoying to have to create a boolean set to true, just to bind a static class to a component. It’s so much cleaner to use the host property for a static string binding. Really feels like I’m fighting the compiler to do something “the right way” and the compiler is forcing me to do it “the wrong way”.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow use of host property in @Component if intended values ...
I think it should be acceptable to use the host property in component/directive decorators as long as the keys are being set to...
Read more >
Techniques to style component host element in Angular
Imagine a complex application where you want to implement a new feature, including new styles. If the styles aren't isolated, you will have...
Read more >
Property binding - Angular
Use property binding to do things such as toggle button features, set paths programmatically, and share values between components.
Read more >
Configuring Dispatcher | Adobe Experience Manager
You can use environment variables in string-valued properties in the ... HTTP or HTTPS request, it finds the virtual host value that best-matches...
Read more >
Job definition parameters - AWS Batch
The following container properties are allowed in a job definition. ... If a maxSwap value of 0 is specified, the container doesn't use...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found