Trouble creating a reusable Angular Material dialog wrapper component

I'm trying to create a reusable Angular component that acts as a wrapper for Material Angular dialogs. The goal is to pass a child component or template to the wrapper component and then open it using the MatDialog service.

I've created a DialogWrapperComponent that accepts a child component using @ContentChild. However, when I attempt to pass the child component to the MatDialog.open() method, I encounter issues and the dialog does not open as expected.

Here's an example of my DialogWrapperComponent template:

<!-- dialog-wrapper.component.html -->
<ng-container #templateRef>
  <ng-content></ng-content>
</ng-container>

And here's a simplified version of how I'm using the DialogWrapperComponent in my parent component:

<!-- app.component.html -->
<app-dialog-wrapper>
  <mat-dialog-content>
    <!-- Content goes here -->
  </mat-dialog-content>
</app-dialog-wrapper>

In my parent component, I'm using the DialogWrapperComponent and trying to pass the mat-dialog-content as the child component to be displayed in the dialog.
I'm not sure what I'm missing or if there's a better approach to achieve my goal of creating a reusable dialog wrapper component. Can anyone provide guidance or suggest an effective solution for creating a reusable Material Angular dialog wrapper component?

Actually, due to the way MatDialog works, it requires passing a Component or a TemplateRef to it. Right now, you are passing a DOM element to create a dialog. Hence it's not working.

You can create reusable templates for a MatDialog the following way.

First, create a component that includes a template you want to reuse. Say it's a confirmation dialog:

<!-- app-confirmation-dialog.html -->
<h2 mat-dialog-title>Delete Confirmation</h2>
<mat-dialog-content>
    Are you sure you want to delete this item?
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true">Delete</button>
</mat-dialog-actions>

Then, you can create a service that opens this ConfirmationDialogComponent when you want to delete an item. This service therefore becomes reusable:

// dialog.service.ts 
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './dialogs/confirmation-dialog.component';

@Injectable({ providedIn: 'root' })
export class DialogService {
    constructor(private dialog: MatDialog) { }

    openConfirmDialog() {
        return this.dialog.open(ConfirmationDialogComponent, {
            width: '390px',
            panelClass: 'confirm-dialog-container',
            disableClose: true
        });
    }
}

In your component you will use this service as follows:

// app.component.ts
import { Component } from '@angular/core';
import { DialogService } from '../services/dialog.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
    constructor(private dialogService: DialogService) {}

    deleteItem() {
        const dialogRef = this.dialogService.openConfirmDialog();

        dialogRef.afterClosed().subscribe(res => { 
            if (res) {
                // User clicked 'Delete'
            } else {
                // User clicked 'Cancel' or closed the dialog
            }
        });
    }
}

You can reuse this pattern for all your dialog templates, just adjust the component you pass into the open() method.