IssueRaiser

Allow host binding to feed inputs to host directives

### 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: ```ts @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

Posted by jnizet on May 30, 2023, 6:29 AM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.2,500 issues0 comments

github (SaaS)

Allow host binding to feed inputs to host directives

jnizetMay 30, 2023, 6:29 AM

### 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: ```ts @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

Comments (0)

No comments yet. Start the discussion.

Comment on this issue