To call a component inside Dialog component in angular material

Question

I have 2 components called
1) demo
2) add-customer

In demo component i have an button called add. On clicking the button an function (ex openDialog() )is called to open an dialog window(i,e op-up window).Now i want to call add-customer component inside this dialog window.
How can i do this. Here is the stackblitz link.

Answer 1

Demo.component.ts you need to "insert" the component into the dialog.

import {AddCustomerComponent} from '../add-customer/add-customer.component'

 openDialog(): void {
    const dialogRef = this.dialog.open(AddCustomerComponent, {
      width: '450px',
    });

app.module.ts, add the component loaded in the dialog to the entryComponents

declarations: [
    AppComponent,
    DemoComponent,
    AddCustomerComponent,
    ],
entryComponents: [
    AddCustomerComponent
],

EDIT: to close on cancel you must add a click function to the cancel button on the add-customer.component.html

<button mat-raised-button type="button" class="Discard-btn" (click)="cancel()">Cancel</button>

Then on the .ts file add the function and also inject the dialogRef on the constructor

import {MatDialogRef} from '@angular/material';

constructor(private fb: FormBuilder,
              private dialogRef: MatDialogRef<AddCustomerComponent>) {}

    public cancel() {
       this.dialogRef.close();
    }

Answer 2

You have to first add the component you want to create dynamically as the entry component of the module.

@NgModule({
  imports: [
  ],
  declarations: [
    AppComponent,
    DemoComponent,
    AddCustomerComponent,
    ],
  bootstrap: [AppComponent],
  providers: [],
  entryComponents: [AddCustomerComponent] // This line
})

Then you have to use the method exposed by the angular material to add create the component you need as

let dialogRef = dialog.open(AddCustomerComponent, {
  height: '400px',
  width: '600px',
});

This should work as expected.

You can see it workiing Here