Baike.dev
All toolsAI codingTrendingOpen sourceNewsSubmit
Log in
Back to tool/Back to issues
#70748·angular

feat(core): shorthand for exposing model input/output pairs in hostDirectives

Author: mauriziocesconCreated Sep 16, 2026Updated Sep 17, 2026
Labelsarea: coregemini-triaged
### Which @angular/* package(s) are relevant/related to the feature request? core ### Description Hey! Currently, exposing a model through `hostDirectives` requires listing its input and output separately: ```ts @Directive({ selector: '[dir]' }) export class Dir { readonly value = model.required(); } @Component({ selector: 'Comp', hostDirectives: [ { directive: Dir, inputs: ['value: aliasedValue'], outputs: ['valueChange: aliasedValueChange'], }, ], template: ` - {{ value() }} + `, }) export class Comp { protected readonly value = inject(Dir).value; } @Component({ imports: [Comp], template: `

Value: {{ v() }}

`, }) export class App { protected readonly v = signal(0); } ``` https://stackblitz.com/edit/stackblitz-starters-envjksbm The `hostDirectives` API predates `model()`, so this makes sense. However, since `createComponent` now supports `twoWayBinding()`, I think it would be nice to offer a similar convenience in `hostDirectives` and reduce this boilerplate (assuming details such as overlapping declarations can be addressed). In general, a concrete use case is aria/directives. So something like this: ```ts hostDirectives: [ { directive: Dir, models: ['value: aliasedValue'] }, ] ``` Thanks a lot! Cheers

Source: angular/angular

View original on GitHubView discussion on GitHub