Hard15 minAngular Advanced
UpdatedAug 2, 2026
Edit

Directive Composition API vs. Inheritance

CONCEPTS:Directive Composition API

Question Variations

  • "Why is the Directive Composition API preferred over component inheritance in modern Angular?"
  • "How do you use `hostDirectives` to share functionality between components?"
  • "Can you map inputs and outputs from a host directive to the host component? How?"
  • "What are the limitations of the Directive Composition API compared to traditional inheritance?"

Why This Is Asked

Logic reuse is a classic software engineering challenge. In the past, Angular developers often turned to component inheritance, which is brittle and complex. The Directive Composition API is the modern, preferred way to share UI logic. Interviewers ask this to see if you understand how to build flexible, composable UI components and if you’re aware of the latest architectural best practices introduced in Angular 15+.

Key Concepts

  • Composition over Inheritance: Why inheritance is an anti-pattern in modern UI frameworks.
  • Host Directives: Applying directives to a component’s host via metadata.
  • Input/Output Mapping: Exposing directive properties through the host component.
  • Shared Logic: Using directives for common behaviors like Tooltip, Ripple, or Validation.

Question Variations

  • “Why is the Directive Composition API preferred over component inheritance in modern Angular?”
  • “How do you use hostDirectives to share functionality between components?”
  • “Can you map inputs and outputs from a host directive to the host component? How?”
  • “What are the limitations of the Directive Composition API compared to traditional inheritance?”

Answers by Technology

+ Add Variant
AngularImprove this answer ✏️

Expected Answer

The Directive Composition API allow you to add directives to a component’s host element from within the component’s metadata. This provides a powerful alternative to component inheritance.

Comparison:

FeatureComponent InheritanceDirective Composition
FlexibilityRigid (Single inheritance)Highly flexible (Multiple composition)
ComplexityHigh (Fragile base classes)Low (Isolated, reusable units)
TemplateMust be managed carefullyDirectives only affect the host element
MetadataInherited but hard to overrideExplicitly composed and mapped

Example Code:

In this example, MenuComponent automatically gains all the functionality of the CdkMenu directive without needing to inherit from it or have the user manually add cdkMenu in the HTML.

@Component({
  selector: 'app-menu',
  standalone: true,
  hostDirectives: [{
    directive: CdkMenu,
    inputs: ['cdkMenuOrientation: orientation'],
    outputs: ['cdkMenuOpened: opened'],
  }],
  template: `<ng-content></ng-content>`
})
export class MenuComponent {}

Why It Matters

It enables true code reuse. Instead of creating a BaseButton class and having PrimaryButton, SecondaryButton, etc., inherit from it, you can create specific directives for behaviors (like ClickTrackingDirective or FocusableDirective) and compose them into any component that needs them. This keeps components small, focused, and incredibly easy to test and maintain. It also prevents the “giant base class” problem that plagues many large-scale Angular applications.

Common Mistakes

  • Trying to compose components: You can only compose directives into a component’s host, not other components.
  • Forgetting Input/Output mapping: If the directive has inputs you want the host component’s users to access, you must explicitly list them in the inputs array of the hostDirectives metadata.
  • Directives with templates: Only attribute directives should be used for composition, as the host component already has its own template.

Follow-up Questions

  • Can you compose multiple directives? (Answer: Yes, the hostDirectives array can contain as many directives as needed).
  • Can directives themselves have host directives? (Answer: Yes, composition is recursive, allowing you to build complex behaviors from smaller pieces).
  • What happens to conflicts? (Answer: If multiple directives bind to the same host property, standard Angular resolution rules apply, but usually directives should be designed to manage their own separate responsibilities).

References