Directive Composition API in Angular

Hello All, Today we are going to learn a new concept that has been introduced in Angular 15. “Directive composition API”  is the most requested feature from the Angular community since Angular 2.

Let’s understand the feature in detail:

The Directive Composition API allows you to apply the directive directly to the host element of your component.ts class.

Let us see how We were using directives previously, and what is the difference in the new features while using directives.

Using Directive Composition Api 

Let’s create a new Angular app  ng new Derective_Composition_Api.

Now let’s create a directive and a component to use the directive.

Create a directive and component using the following commands, respectively: ng g directive directives/textcolor and ng g component components/directive_test

Add the below code in the textcolor directive

import { Directive } from '@angular/core';

@Directive({
  selector: '[appTextcolor]',
  host:{'style':'color:blue'}
})
export class TextcolorDirective {

  constructor() { }

}

Add some text in DirectiveTest Component  HTML  file to apply your directive effect.

now call your DirectiveTest component from the app component:-

now the text inside the directiveTest component will display in blue color :

Now Using Directive Composition Api  we can directly call the directive in hostDirectives  property of component declaration .

import { Component } from '@angular/core';
import { TextcolorDirective } from 'src/app/directives/textcolor.directive';

@Component({
  selector: 'app-directive-test',
  templateUrl: './directive-test.component.html',
  styleUrls: ['./directive-test.component.scss'],
  hostDirectives: [TextcolorDirective],
})
export class DirectiveTestComponent {}

now if you run your angular app it will throw an error error NG2014: Host directive TextcolorDirective must be standalone.

That means we can only use standalone directives in hostDirectives.

Add Standalone property in your directive declaration and remove the declaration from the app module.

import { Directive } from '@angular/core';

@Directive({
  selector: '[appTextcolor]',
  host:{'style':'color:blue'},
  standalone:true
})
export class TextcolorDirective {

  constructor() { }

}

now the text inside the DirectiveTest component will display in blue color using Directive Composition API.

Add Multiple Directive in hostDirectives Property:- 

We can add more than one directive in the host directive property. Let’s Create an example of how we can do so.

let’s create multiple directives with specific functionality:-

ng generate directive texttransform --standalone=true
ng generate directive background-color --standalone=true

now add the directive in the host directive property.

import { Component } from '@angular/core';
import { BackgroundColorDirective } from 'src/app/directives/background-color.directive';
import { TextcolorDirective } from 'src/app/directives/textcolor.directive';
import { TextTransformDirective } from 'src/app/directives/texttransform.directive';

@Component({
  selector: 'app-directive-test',
  templateUrl: './directive-test.component.html',
  styleUrls: ['./directive-test.component.scss'],
  hostDirectives: [TextcolorDirective,TextTransformDirective,BackgroundColorDirective],
})
export class DirectiveTestComponent {}

Chain of Host Directives:-

We can also create a chain of host Directive For Example:-

let’s create a parent directive that styles to create a chain:- ng g d directives/style

// In the style directive we are calling TextcolorDirective

import { Directive } from '@angular/core';
import { TextcolorDirective } from './textcolor.directive';

@Directive({
  selector: '[appTstyle]',
  standalone:true,
  hostDirectives:[TextcolorDirective]
})
export class StyleDirective {

  constructor() { }

}
// In the TextcolorDirective  we are calling TextTransformDirective 

import { Directive } from '@angular/core';
import { TextTransformDirective } from './texttransform.directive';

@Directive({
  selector: '[appTextcolor]',
  host:{'style':'color:blue'},
  standalone:true,
  hostDirectives:[TextTransformDirective]
})
export class TextcolorDirective {

  constructor() { }

}

// In the TextTransformDirective  we are calling BackgroundColorDirective

import { Directive } from '@angular/core';
import { BackgroundColorDirective } from './background-color.directive';

@Directive({
  selector: '[appTextTransform]',
  host:{'style':'text-transform: uppercase'},
  standalone:true,
  hostDirectives:[BackgroundColorDirective]
})
export class TextTransformDirective {

  constructor() { }

}

// now instead of calling multiple directives in the host Directive of component, we will call only styleDirective 

import { Component } from '@angular/core';
import { BackgroundColorDirective } from 'src/app/directives/background-color.directive';
import { StyleDirective } from 'src/app/directives/style.directive';
import { TextcolorDirective } from 'src/app/directives/textcolor.directive';
import { TextTransformDirective } from 'src/app/directives/texttransform.directive';

@Component({
  selector: 'app-directive-test',
  templateUrl: './directive-test.component.html',
  styleUrls: ['./directive-test.component.scss'],
  hostDirectives:[StyleDirective]
})
export class DirectiveTestComponent {}

For more detail about the Directive Composition Api  please refer to the link

Here is the source code for the above example GitHub

Thanks for Reading.Hope this article helps you