I have a reusable custom Material UI Dialog that I want to utilize to show different components. For instance, I would like to display a Login component on one occasion and a Registration component on another. However, the issue arises when I assign my component to the body of the dialog - it displays the code of my component instead of rendering it as intended. While sending text works fine, sending a component to be displayed in the middle of the Dialog seems to be impossible. How can someone pass a component as an object or template to be shown in a dialog? The Invitation component consists of HTML code, input controls, and a button, and I aim to showcase it in the center of my dialog, similar to a page displayed within an iframe. Any insights or assistance on this matter would be greatly appreciated.
<div class="title">
<h2 mat-dialog-title>{{ data.title }}</h2>
<span mat-dialog-close class="material-icons closeButton">close</span>
</div>
<hr>
<div>
<mat-dialog-content class="mat-typography">
{{ data.body }}
</mat-dialog-content>
<hr>
<div class="actionSection">
<mat-dialog-actions>
<button mat-button class="secondary" mat-dialog-close>{{ data.cancelButton }}</button>
</mat-dialog-actions>
</div>
</div>
</div>
my calling code is:
const dialogRef = this.dialogService.open(CustomDialogComponent,
{
hasBackdrop: true,
disableClose:true,
data:{
title: 'Invite User',
body: InvitationComponent,
cancelButton: 'Close' }
This is how my CustomDialogComponent appears:
export class CustomDialogComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
private dialogRef: MatDialogRef<CustomDialogComponent>) {
console.log(data.body);
}
ngOnInit() {
}