Dynamically load a component inside a Material MatDialog

Question

Can anyone provide an example of how to dynamically load a component into a Material MatDialog?

What I would like to do is this: I will provide the MatDialog confi

Answer 1

The actual modal component .ts: (note that the modal component's html is where you will write your code above)

import {Component, Inject, OnInit} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';


@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef,
                @Inject(MAT_DIALOG_DATA) public data: any)
                 {
    }

    ngOnInit() {
    }

    onConfirm() {
        this.dialogRef.close(true);
    }

    onCancel(): void {
        this.dialogRef.close(false);
    }

}

And the component from where you call the Modal:

import {Component, OnInit} from '@angular/core';
import {MatDialog} from '@angular/material';
import {ModalComponent} from './modal-component';


@Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {


    constructor(public dialog: MatDialog) {
    }




    openDialog(): void {
        let dialogRef = this.dialog.open(ModalComponent, {
            width: '500px'
        });

        dialogRef.afterClosed().subscribe(result => {
            // result is what you get after you close the Modal
        });
    }

}