feat(material/dialog): Allow @Input for data sharing

[ferhado]

Feature Description

Currently, Angular Material's MatDialog and CDK's Dialog components use MAT_DIALOG_DATA for passing data. This feature proposes to allow the usage of @Input for data sharing instead.

Use Case

This feature allows for greater flexibility and reusability of dialog components, particularly when using the Router option withComponentInputBinding. For example:

// Proposed usage with @Input
@Component({
  selector: 'app-my-dialog',
  template: ``
})
export class MyDialogComponent {
  @Input() name: string;
  @Input() age: number;
}

// Open dialog
this.dialog.open(MyDialogComponent, {
  data: { name: 'John', age: 30 }
});

[crisbeto]

How would this work in practice? The dialog isn't rendered in a template so the only way to set the input would be through setInput.

[ferhado]

Hi @crisbeto,

In theory, this approach works:

const dialogRef = this.dialog.open(MyDialogComponent);
dialogRef.componentInstance.name = 'John';
dialogRef.componentInstance.age = 30;

However, this method is tricky and not ideal for practical use. It would be better implemented directly within the CDK to ensure a more robust and streamlined solution for data binding via @Input.

I'm not familiar with the source code, so I'm unsure how this would integrate with the new Angular feature signals for compatibility.

Thanks for considering this feature.