Angular 22 introduces host directive de-duplication, fixing a long-standing issue where two directives sharing the same host directive on the same element would throw a duplicate directive error. The post walks through building a copy button with tooltip, press feedback, and clipboard support using the Directive Composition API. It explains why the old behavior broke (Angular saw the same directive matched twice), how Angular 22 merges duplicate host directive instances into one, and the key caveat that input/output aliases must match across all composing directives to avoid conflicting binding errors.
Table of contents
Creating the Shared Tooltip DirectiveComposing Tooltip Behavior Into a Copy ButtonReusing the Same Tooltip in a Pressable DirectiveApplying Both Directives to the Same ButtonGet Brian Treese ’s stories in your inbox2.5K Impressions