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

Start by reading the core hostDirectives API for separate inputs and outputs, then compare it with model() and twoWayBinding() behavior in createComponent. Trace how aliases and overlapping declarations are handled. Done means a models shorthand supports aliased model input/output pairs without regressions, with coverage for the relevant edge cases.

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:

@Directive({ selector: '[dir]' })
export class Dir {
  readonly value = model.required<number>();
}

@Component({
  selector: 'Comp',
  hostDirectives: [
    {
      directive: Dir,
      inputs: ['value: aliasedValue'],
      outputs: ['valueChange: aliasedValueChange'],
    },
  ],
  template: `
    <button (click)="value.set(value() - 1)">-</button>
    <span>{{ value() }}</span>
    <button (click)="value.set(value() + 1)">+</button>
  `,
})
export class Comp {
  protected readonly value = inject(Dir).value;
}

@Component({
  imports: [Comp],
  template: `
    <h3>Value: {{ v() }}</h3>
    <Comp [(aliasedValue)]="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:

hostDirectives: [
    { directive: Dir, models: ['value: aliasedValue'] },
]

Thanks a lot!

Cheers