Exposed Components Communication Channels

[KamilPieronczyk]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Writing wrapper comopnents for 3rd party libraries is tedious because of neccessity to expose all inputs and outputs of 3rd party component to parent component. Each 3rd party component update requires to recheck all wrappers. My proposal is to create an API to expose all inputs and outputs in seperate arrays.
If someone has better API design please update.

Proposed solution

@Component({
  selector: 'app-wrapper',
  template: `<app-child [title]="title" [{propsInputs}] ({propsOutputs})></app-child>`,
  propsInputs: [...Inputs(ChildComponent)],
  propsOutputs: [...Outputs(ChildComponent)],
})
export class WrapperComponent {
  @ViewChild(ChildComponent, { static: true }) child: ChildComponent;
  @Input() title = 'Overridden title input';
  @PropsInputs() propsInputs;
  @PropsOutputs() propsOutputs;
}

@Component({
  selector: 'app-child',
  template: '<p>{{ title }} {{ description }}</p>',
})
export class ChildComponent {
  @Input() title = '';
  @Input() description = '';
}

Usage

<app-wrapper [description]="Exposed Description"></app-wrapper>

Alternatives considered

No idea

[vneogi199]

Quite similar to #14545. Though it's a must have for library developers.

[pkozlowski-opensource]

Also related discussion in #41993

[alxhub]

Closing as a duplicate of #14545.