Angular 15: Get data from hostDirective in component

Question

Is it possible to use directive composition API to provide inputs to component?

@Directive({
  selector: '[colorConfig]',
})
class ColorConfigDirective() {
  @Input() colorName: string;
}

@Component({
  selector: 'my-icon',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './my-icon.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  hostDirectives: [ColorConfigDirective]
})
export class MyIconComponent {

  // How to get color passed to ColorConfigDirective here ??? Is it possible?

}

Read through docs, but couldn't spot anything helpful

Answer 1

Use in constructor of the component

constructor(@Optional() @Host() private colorDirective:ColorConfigDirective){
     //you can check if null to give a default value
     if (this.colorDirective===null)
     {
          ...do something...
     }
}

BTW, the directive should be like

@Directive({
  selector: '[colorConfig]',
})
// see the "export" and it's not with ()
export class ColorConfigDirective {
  @Input() colorName: string;
  //See that you can use also the same name to the Input to not need add 
  //an auxiliar attribute
  @Input('colorConfig') config //<--in this case the name of variable is config
  //or
  @Input() colorConfig

}