How could I show a child component into Modal box? Angular-CodePudding

I have 2 components: parent & child. I want that the child component appears in a modal box. How could I do this please?

CodePudding user response：

If you check out Angular Material's dialog component, you can pass a component to its MatDialog service. All you would need to do is inject MatDialog in the parent component constructor and attach the opening of a dialog with your child component to whatever event you want (a button click, from what I've understood)!

@NgModule({
  declarations: [
    ParentComponent,
    ChildComponent,
  ],
  imports: [
    MatDialogModule
  ]
})
export class ExampleModule { }

@Component({
  selector: 'parent-component',
  template: `
    <button (click)="openDialog()"></button>
  `
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(ChildComponent);
  }
}