Why does the dialog window not show content when clicking on button?

I am trying to open a dialog window that comes up when clicking on 'Add/Remove Reps' button. When I click on that button it opens up a small, slim window on the left side of the browser with no content from the dialog component. I am asking for assistance on what I'm missing to get the content to show when clicking on that button.

html

<button class="mat-button-main" (click)="showPrompt()">Add/Remove Reps</button>


ts

constructor(private dialog: MatDialog) {}
dataFromDialog: any;

showPrompt(): void {
const dialogRef = this.dialog.open(MatInputPromptComponent, {
width: '350px',
height: '400px',
});

dialogRef.afterClosed().subscribe((data) => {
this.dataFromDialog = data.form;
if (data.clicked === 'submit') {
console.log('Sumbit button clicked');
}
});
}


Stackblitz Demo

Continue reading...