Skip to content

required inputs shouldn't always have to be exposed by composed directive  #50510

@jnizet

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions