Explain Directive Composition API in Angular

23 / 100

Directivesadvanced

Directive Composition API

Explain how the Directive Composition API lets a component apply another directive's behavior to itself without the consumer adding it manually.

The Directive Composition API, introduced in Angular 15, lets a component declare a hostDirectives array in its metadata, applying one or more directives directly to that component's host element automatically — without requiring whoever uses the component to remember to add the directive themselves in their template. This addresses a real composition problem: before this API, if you wanted every button in your design system to also get tooltip behavior or a ripple effect, you either had to build that behavior into the button component's own code (duplicating it if other components needed it too) or ask every consumer to remember to add appTooltip alongside app-button in their templates.

It's like a car coming from the factory with heated seats and lane-assist already built in as standard equipment, rather than expecting every driver to separately install those features themselves after buying the base model.

Key Concepts

With hostDirectives, a component can say "I am composed of this behavior" declaratively, similar in spirit to mixins or traits in other languages, but implemented through Angular's existing directive and DI mechanisms rather than a new language feature. The composed directive's inputs and outputs are private to the component by default — the host component must explicitly re-expose them via the inputs/outputs sub-properties of the hostDirectives entry if it wants consumers to be able to bind to them directly.

hostDirectivesinputsoutputs

This is a meaningfully different composition model from inheritance (extending a base component class), which Angular has always technically allowed but generally discourages, because class inheritance couples components tightly and doesn't compose well when a component needs behavior from multiple unrelated sources. hostDirectives lets you combine multiple, independent behaviors (e.g., both a FocusableDirective and a TooltipDirective) on a single component without any inheritance hierarchy at all.

hostDirectivesFocusableDirectiveTooltipDirective

Interviewers who ask about this are usually checking whether you're aware of relatively recent (but now well-established) Angular APIs, since it's a strong signal of composition-over-inheritance thinking, which is broadly valued across frontend architecture discussions, not just Angular specifically.