I have a custom directive (myDirective) that composes a third-party directive (ThirdPartyDirective) via the hostDirectives property in Angular.

I’m passing several inputs directly, but one of them needs to be computed in my directive before being passed along. Specifically, I have a read-only signal (time) from which I compute a dateFromTime value. I’d like to use dateFromTime as an input in ThirdPartyDirective.

The challenge is that ThirdPartyDirective expects a signal input, and I cannot simply assign a new signal in an effect. How can I handle computed inputs in this scenario so that dateFromTime is properly passed to ThirdPartyDirective?

@Directive({
  selector: '[myDirective]',
  standalone: true,
  hostDirectives: [
    {
      directive: ThirdPartyDirective,
      inputs: [
        'name',
        'age',
        'date' // <-- I'd like this to be based on a computed value
      ]
    }
  ]
})
export class MyDirective {
  readonly time = input.required<number>();
  dateFromTime = computed(() => new Date(this.time()));

  // I'd like to pass dateFromTime as 'date' to ThirdPartyDirective
}

Is there a recommended approach passing a computed value into the host directive’s input?

Any tips, patterns, or best practices you can share would be greatly appreciated!

I have a custom directive (myDirective) that composes a third-party directive (ThirdPartyDirective) via the hostDirectives property in Angular.

I’m passing several inputs directly, but one of them needs to be computed in my directive before being passed along. Specifically, I have a read-only signal (time) from which I compute a dateFromTime value. I’d like to use dateFromTime as an input in ThirdPartyDirective.

The challenge is that ThirdPartyDirective expects a signal input, and I cannot simply assign a new signal in an effect. How can I handle computed inputs in this scenario so that dateFromTime is properly passed to ThirdPartyDirective?

@Directive({
  selector: '[myDirective]',
  standalone: true,
  hostDirectives: [
    {
      directive: ThirdPartyDirective,
      inputs: [
        'name',
        'age',
        'date' // <-- I'd like this to be based on a computed value
      ]
    }
  ]
})
export class MyDirective {
  readonly time = input.required<number>();
  dateFromTime = computed(() => new Date(this.time()));

  // I'd like to pass dateFromTime as 'date' to ThirdPartyDirective
}

Is there a recommended approach passing a computed value into the host directive’s input?

Any tips, patterns, or best practices you can share would be greatly appreciated!

• angular
• angular-directive
• angular-signals

• could you try using host bindings? host: {date: 'dateFromTime()'} – Andrei Commented 8 hours ago
• Not working. it doesn't get it as an input ☹️ – Matan Shushan Commented 7 hours ago
• it seems there is no good solution then. you could inject the directive instance and make an effect to set the input when the computed signal updates – Andrei Commented 7 hours ago
• No can do, the input is signal, and readonly. – Matan Shushan Commented 7 hours ago

1 Answer 1

I believe that composing directive can't modify and pass values to host directive inputs per this comment:

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

https://github/angular/angular/issues/50700#issuecomment-1590896233