Angular material dialog - pass types into dialog component

Question

I'm working on data driven app and currently I'm facing a problem of passing types into material angular dialog. I want to create reusable dialog form and need to change types for new dialog instance.

Is there a way to pass type into material dialog or into component? Or maybe there is possibility to create types in dialog itself from string passed as data?

I want to use types in dialog component like this (or similar):

export class DialogDynamicItemManagerDialog<T> {

    public dialogName: string;
    public items: Array<T>;
    public selectedItem: T;
    ...
}

I've tried to pass the type like this:

 OpenDynamicDialog(): void {
    this.dialog.open(DialogDynamicItemManagerDialog<MyType>, {
      data: {
        title: 'Manage items',
        items: this.items
      },
    });
}

but obviously it doesn't work.

I've also tried this:

 OpenDynamicDialog(): void {
    const dialogRef = this.dialog.open(DialogDynamicItemManagerDialog, {
      data: {
        title: 'Manage items',
        items: this.items,
        itemType: itemType
      },
    });
}

but I haven't find a way to change string into type in dialog afterwards.

You can avoid using generics using any insteadof T. Make DialogDynamicItemManagerDialog just a normal class with @Component decorator — Rem
Thank you for your answer! DialogDynamicItemManagerDialog is just normal component, with @Component decorator and unfortunately I want to pass type into it and not use type 'any'. — Paula

Edric Edric · Accepted Answer · 2019-09-04T11:47:21

TL;DR:

You can use the following code to specify the type that your dialog's data will use:

import { MatDialog } from '@angular/material/dialog';

export class MyComponent {
  constructor(private dialog: MatDialog) { }

  openDialog() {
    this.dialog.open<MyDialogComponent, MyType>(MyDialogComponent, {
      data: {
        // Your data goes here
      }
    };
  }
}

In your dialog component:

import { MAT_DIALOG_DATA } from '@angular/material/dialog';

export class MyDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: MyType) { }
}

The open method of the MatDialog class actually allows three types to be specified (in order of sequence):

T: The component class (optional - although there's no default value, you don't have to specify it if you're just calling the method without any other types)
D: The type to be used for the data to be added to the dialog (optional - defaults to any)
R: The type to be used for the result of the dialog (optional - defaults to any)

The method is defined as below:

  /**
   * Opens a modal dialog containing the given component.
   * @param componentOrTemplateRef Type of the component to load into the dialog,
   *     or a TemplateRef to instantiate as the dialog content.
   * @param config Extra configuration options.
   * @returns Reference to the newly-opened dialog.
   */
  open<T, D = any, R = any>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
          config?: MatDialogConfig<D>): MatDialogRef<T, R> {
    // ...
  }

The D type is then passed to MatDialogConfig, which accepts the same type to be used for the data to be passed in to the dialog.

References:

MatDialog#open source code - notice how the types are passed around in the code!
MatDialogConfig source code - notice how the class is defined!

Angular material dialog - pass types into dialog component

2 Answers