Dialog with inline template (no separate component)

[Christian-E]

Hey! I am trying to display a dialog using an inline template and no separate component for the dialog. Unfortunately I am not getting this to work and there is no documentation for this case (is it actually intended to do this?). I would very appreciate any help on how to get this to work.

In my .component.html i have something like this:

<button mdc-button (click)="openDialogWithRef(myDialog)">Open dialog</button>
<ng-template #myDialog>
  <mdc-dialog>
    <mdc-dialog-container>
      <mdc-dialog-surface>

        <mdc-dialog-title>Dialog!</mdc-dialog-title>>
        <mdc-dialog-content>
          <p>Dialog content goes here</p>
        </mdc-dialog-content>
        <mdc-dialog-actions>
          <button mdcDialogButton mdcDialogAction="close">Close</button>
        </mdc-dialog-actions>
      </mdc-dialog-surface>
    </mdc-dialog-container>
  </mdc-dialog>
</ng-template>

And in my .component.ts:

openDialogWithRef(templateRef: TemplateRef<any>) {
    this.dialog.open(templateRef);
  }

When clicking the button I get this error:

ERROR NullInjectorError: StaticInjectorError(AppModule)[MdcDialogComponent -> MdcDialogRef]: StaticInjectorError(Platform: core)[MdcDialogComponent -> MdcDialogRef]: NullInjectorError: No provider for MdcDialogRef!

When i remove the surrounding <mdc-dialog> and <mdc-dialog-container> from the template then it actually shows a "dialog" - but that looks obviously completely destroyed. I already tried to add all kinds of stuff to my .module.ts but it didn't realy change anything.

Thanks in advance! Christian

[PabloG6]

Did you ever figure out the answer to this??

[trimox]

@PabloG6 This should work, investigating for fix.