0

Using Angular 15+ hostDirectives, how can I bind to inputs of the directive?

Note that I don't want to forward directive inputs to the host component, making them inputs of the component. I want to bind an expression to one of the directive inputs.

@Directive({
  standalone: true,
})
class MyDirective {
  @Input()
  directiveInput?: string;
}


@Component({
  hostDirectives: [ MyDirective ],
  host: {
    '[directiveInput]': 'inputValue' // This won't work, even if `directiveInput` is defined in the inputs of host directive definition object.
  }
})
class MyComponent {

  inputValue: string;
}

I sure can inject the directive, and assign the input manually in ngOnInit. But:

  • It would be nicer to avoid imperative assignment of the input, and have the same declarative way of binding to inputs, regardless of directive being used in template or in hostDirectives
  • If the value is not static but an expression, one needs to update the directive input every time the result of the expression is changed.
Alireza Mirian
  • 5,862
  • 3
  • 29
  • 48

1 Answers1

0

I'll quote one of the member of the angular team here:

The composing directive can not provide values to host directive inputs.

Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134