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! CheersSource: angular/angular