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.

[natebundy]

Signal inputs on CDK Dialog would greatly help on my project as well. Currently, we have to setInput observables on to the component ref, which feels like an anti-pattern:

const dialogRef = this.dialog.open(MyDialogComponent);
dialogRef.componentRef.setInput('transactions', transactions$);

Otherwise, it would be really nice if setInput could accept a signal and automatically update the input when the signal emits. (I just found https://github.com/angular/angular/issues/57849, which may be a better way to address this)

e.g., our project opens "modals" (CDK Dialogs) on table row clicks, and it's possible for the data passed in to the modal to update while the modal is open. Currently, the "right" way to do this seems to be calling setInput again on every observable emission, but then you also have to keep track of open modal states and make sure you aren't trying to call setInput on a destroyed/closed modal componentRef. It's a lot more straightforward to send an observable in the component input and subscribe to it, but that's really not how Angular's input system is designed.

It's also possible I'm ignorant of the proper way to handle this use case in Angular.

[ducthang-vu]

Couldn't this be solved by just using a signal or signals as MAT_DIALOG_DATA?