--- title: "Angular 22 hostDirectives De-Duplication Explained" url: https://daily.dev/posts/angular-22-hostdirectives-de-duplication-explained-9jnywjyil source_url: https://itnext.io/angular-22-hostdirectives-de-duplication-explained-d2e8791f2e03 type: article source: "ITNEXT" published: 2026-07-03T19:15:03.793Z updated: 2026-07-03T19:55:04.891Z tags: ["webdev", "typescript", "angular"] reading_time: 8 upvotes: 1 comments: 0 language: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Angular 22 hostDirectives De-Duplication Explained **[ITNEXT](https://daily.dev/sources/itnext)** · 8 min read · 1 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Angular Material Dialogs Now Support Real Component Bindings](https://daily.dev/posts/angular-material-dialogs-now-support-real-component-bindings-3zdypvwvu) · ITNEXT · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#typescript](https://daily.dev/tags/typescript), [#angular](https://daily.dev/tags/angular) [View this post on daily.dev](https://daily.dev/posts/angular-22-hostdirectives-de-duplication-explained-9jnywjyil)