Allow host binding to feed inputs to host directives

[jnizet]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

If a directive (let's named it ReusableDirective) exposes a required input (foo), and is used as a host directive by another directive (ComposedDirective), then the compiler forces the composed directive to expose the required input.

This is problematic when the whole point of the composed directive is precisely to provide a default or computed value for the required input.

For example:

@Directive({
  selector: '[app-reusable]',
  standalone: true,
})
class ReusableDirective {
  @Input({ required: true }) foo!: string;

  // do something useful with foo here, but that's irrelevant
}

@Directive({
  selector: '[app-composed]',
  standalone: true,
  hostDirectives: [ReusableDirective],
})
class ComposedDirective {
  constructor(reusable: ReusableDirective) {
    reusable.foo = 'hello';
  }
}

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-85nxmu?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=src%2Fmain.ts&title=Angular%20Starter

Please provide the exception or error you saw

Required input 'foo' from host directive ReusableDirective must be exposed.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.0.2
Node: 18.16.0
Package Manager: yarn 1.22.19
OS: darwin x64

Angular: 16.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.2
@angular-devkit/build-angular   16.0.2
@angular-devkit/core            16.0.2
@angular-devkit/schematics      16.0.2
@angular/cdk                    16.0.1
@schematics/angular             16.0.2
rxjs                            7.8.1
typescript                      5.0.4

Anything else?

This just hit me in a real situation: ng-bootstrap's typeahead directive's ngbTypeahead input is marked as requird in the latest version, and we have several custom fooTypeahead and barTypeahead directives which simply use ngbTypeahead as a host directive and provide this required input.

[jnizet]

BTW, somewhat related to this issue, I haven't seen how, in the signals RFC, composed directives would be able to set inputs of their host directive if the host directive is a signal directive.

[crisbeto]

My thinking when I was introducing the error was that required inputs are members that the directive can't work without, similarly to how you have to specify every required property from an interface.

[Harpush]

My thinking when I was introducing the error was that required inputs are members that the directive can't work without, similarly to how you have to specify every required property from an interface.

If I can add my opinion - you are correct it can't work without. What's missing is the ability to provide it from the directive itself without exposing it (the hosting one).
If I take the interface example - think of constructor. You must provide say A and B when newing a class. But I can extend this class and create a new constructor accepting nothing and pass A and B in super call. This "hides" the required parameters while still providing them as they are required to the base class. I can also expose them as required in the derived class if I want.

[kbrilla]

My thinking when I was introducing the error was that required inputs are members that the directive can't work without, similarly to how you have to specify every required property from an interface.

If I can add my opinion - you are correct it can't work without. What's missing is the ability to provide it from the directive itself without exposing it (the hosting one). If I take the interface example - think of constructor. You must provide say A and B when newing a class. But I can extend this class and create a new constructor accepting nothing and pass A and B in super call. This "hides" the required parameters while still providing them as they are required to the base class. I can also expose them as required in the derived class if I want.

this is exactly my opinion that I provided on PR introducing required inputs.

Maybe a compromise would be to provide an option to mark required input as provided by directive/component.

@Component({
  selector: 'admin-menu',
  template: 'admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['menuId: id'],
    outputs: ['menuClosed: closed'],
    providedInputs:['requriedInput1'],
  }],
})
export class AdminMenu { 
  constructor() {
    inject(MenuBehavior, {self: true}).requriedInput1 = uuid();
  }
}

or

@Component({
  selector: 'admin-menu',
  template: 'admin-menu.html',
  hostDirectives: [{
    directive: MenuBehavior,
    inputs: ['requriedInput1: {required: false, alias: undefined}], // or just not providing alias at all
    outputs: ['menuClosed: closed'],
  }],
})
export class AdminMenu { 
  constructor() {
    inject(MenuBehavior, {self: true}).requriedInput1 = uuid();
  }
}

this way we won't accidentally ignore required input but can handle providing them from within the host.