Resolved: Angular – directive with input with or without value

Question:

I’m refactoring a directive which adds some sort of a tooltip over the form controls on mouse hover/focus. It’s simple to use. Just add it to the element and define its text. The input you use for the text also defines the tooltip’s styling
We received a request to extend it with option to display not just the text, but also a custom component, which provides better options for styling. It works but it feels bit cumbersome. Instead of just providing a component you have to specify it’s type by providing [libError] value with non-empty string.
I came with couple of workarounds but was wondering if it’s possible to have a directive’s input working in two ways. As the Input and the Attribute at the same time. If used with value, it defines the text, if used alone, it defines style but the component has to be provided. Something like this.
Is it possible to do something like this?

Answer:

Yes, it is possible, but then you need to turn your libError property into a boolean instead. For a better overview, check out boolean property coercion (this is how the CDK does it).
For an usage example, we can take a look at the mat-divider. It uses boolean coercion to allow us to write something as simple as this:
whenever we need a vertical divider.

If you have better answer, please add a comment about this, thank you!