Demo
HTML
Fancy Button
Highlight Directive
Tooltip Directive
TS
SCSS
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
tooltipinput is provided. - Highlight: Temporarily changes the button background color on hover if the
highlightinput 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.
