answer:13

[michaelbe812]

Checklist for challenge submission

• Start your PR message with Answer:${challenge_number}

Really nice - now I learned about host-context:)

[tomalaforge]

My preference is to keep the style inside the styles property of the decorator.

However you should give a default color to your css var if the css var is never defined.

[michaelbe812]

Mine too - I was just too lazy to change it :D

That is a good hint - thanks =)

[tomalaforge]

Great job. That's exactly the answer I wrote.

[michaelbe812]

Great job. That's exactly the answer I wrote.

Thanks a lot =) Ha - cool :D tbh I couldn‘t think of any other good solution.
I really like the approach and I think CSS custom properties are a quite underused feature.

However what I dislike is setting class=„warning“ or error In page-component Line 12 and 13.
This is not very explicit to me bc one will also get no IDE support for autocompletion here I guess?
So one need to remember or look it up in the docs.

For setting the type I guess I would keep an @Input() type: StaticTextType and derive the respective CSS class.
What do you think? How would you do it?

[tomalaforge]

Yes that's true. But I prefer to keep my css inside stylesheet and my logic inside TS. I'm seen Input() to say if flex-direction should be a row or a column. Don't really like that.

And If your entire team is used to host-context, they will search for "css input" inside styles and for other input inside the TS. And if you are creating a UI library, you just have to add it in your documentation. When I'm using any third party library, I often have the doc open.

But if you really want another option, you can use HostListener to map your input to any css class.

[michaelbe812]

I definately agree that Inputs are a lot of times miss used for things like that. Also in terms of creating customizable components where one should rather use content-projection.