Angular 15 - Découvrons la composition de Directives avec hostDirectives

Nous continuons notre découverte des nouveautés d’Angular 15 et de la standalone API, avec la composition de directives.

Les directives, essentielles dans votre code

Vous le savez, pour bien factoriser notre code de template, et certains comportements, il va être essentiel d’utiliser les Directive.

A force d’en créer, vous aurez remarqué qu’on va créer de l’héritage … et ça peut vite devenir un mélange, peu fiable et peu propre de directives parentes, enfantes ..

Un standalone component qui va appeler une host directive

Prenons une directive qui s’applique sur la totalité de notre component.

@Directive({
  selector: '[appChangeColor]',
  host: { 'style': 'color: red'},
  standalone: true
})
export class ChangeColorDirective {

  constructor() { }

}

Vous remarquez ici un point essentiel : la directive doit être standalone !

En décidant de l’appeler depuis le nouvel attribut hostDirective, on va permettre de l’injecter, et aussi de l’instancier, pour chaque composant.

@Component({
  selector: 'app-main',
  standalone: true,
  imports: [
    RouterModule,
    ChildOneComponent,
    MenuGlobalComponent,
    TestColorDirective
    //TestColorModule
  ],
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  hostDirectives: [
    ChangeColorDirective
  ]
})
export class MainComponent {}

Elle sera appliquée pour la totalité de notre composant.

Un composant se composant de plusieurs directives host

Que se passe-t-il si l’on veut appliquer deux directives en même temps ?

Avec hostDirectives, on va pouvoir composer avec ses deux directives :

 hostDirectives: [
    ChangeColorDirective,
    HeightSizeDirective
  ]

Une directive qui se compose de directives

On peut aller plus loin !

L’idée ici c’est de factoriser l’appel de plusieurs directives, via une directive qui les appellent toutes (un anneau unique en somme).

Vive la composition :

@Directive({
  selector: '[appChangeColorHeight]',
  standalone: true,
  hostDirectives: [
    ChangeColorDirective,
    HeightSizeDirective
  ]
})
export class ChangeColorHeightDirective {

  constructor() { }

}

Et c’est là que c’est maginifique !

Il suffit d’appeler la directive appelante dans le composant :

hostDirectives: [
    ChangeColorHeightDirective,
]

Reste à découvrir les input et ouput composites. Nous en reparlons très prochainement !