Directive Composition API

Hello everyone,

I recently had the opportunity to work with Angular Directive Composition API, and I must say it’s a game-changer! This feature allows you to combine multiple small, focused directives into a single component or host directive—resulting in cleaner, more maintainable, and reusable code.

What is Directive Composition API?

Instead of manually adding several directives to your HTML elements, Angular introduces the hostDirectives property in the component or directive decorator. This enables you to encapsulate common behaviors into separate directives and then compose them in one central place.

Key Features & Benefits:

1. Combine Directives with hostDirectives:

With a single configuration, you can add multiple directives to your host element.

Important Note: When you apply hostDirectives to your component, the inputs and outputs from the host directives are not included in your component's API by default. You can explicitly include inputs and outputs in your component's API by expanding the entry in hostDirectives

Example:

@Component({
  selector: 'app-toggle',
  standalone: true,
  hostDirectives: [
    { directive: DisableDirective, inputs: ['disabled: isDisabled'] },
    { directive: ColorDirective, inputs: ['color'] }
  ],
  template: `<button>Click me!</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ToggleComponent {
  @Input() isDisabled: boolean = false;
  @Input() color: string = 'lightblue';
}
        

CopyEdit

In this example, the DisableDirective manages the disabled state while ColorDirective sets the background color—both combined seamlessly into one component.

2. Input/Output Remapping:

Using the syntax innerProp: outerProp, you can rename inputs and outputs, preventing naming conflicts and creating a clean public API.

3. Dependency Injection:

You can inject host directives directly into your component to access and manipulate their behavior programmatically.

4. Performance & Limitations:

All host directives must be defined as standalone.

Overusing directive composition may lead to a higher number of object instances, so always profile your app in large-scale scenarios.

Conclusion:

The Directive Composition API in Angular not only helps reduce code repetition but also leads to a cleaner and more robust component API. It’s especially beneficial for large projects with recurring patterns and behaviors. If you want to learn more or see detailed examples, check out the official Angular documentation.

Have you tried using this Directive Composition API ? I’d love to hear about your experiences and insights!

#Angular #DirectiveCompositionAPI #WebDevelopment #CleanCode

#???????