Directive Composition with hostDirectives

About <fancy-button> and Directive Composition

<fancy-button> is a standalone Angular component that demonstrates directive composition using hostDirectives (Angular 17+).
It composes two directives: Tooltip and Highlight.

  • Tooltip: Shows a tooltip on hover if the tooltip input is provided.
  • Highlight: Temporarily changes the button background color on hover if the highlight input is provided.

How it works:
The fancy-button component uses hostDirectives to forward its tooltip and highlight inputs to the respective directives. This means you can use these features just by adding the inputs to <fancy-button>—no need to apply the directives manually.
The button's color can also be customized using the color input.