Estoy tratando de usar unMatDialog y basado eneste ejemplo He implementado ese diálogo de la siguiente manera:

import {Component, Inject, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../../service/authentication.service';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(private router: Router, public dialog: MatDialog) { }

  openDialog(): void {
    const dialogRef = this.dialog.open(CreateGroupDialogComponent);
  }    
}

@Component({
  selector: 'app-create-group-dialog',
  template: `
    <span>Hello World!</span>
  `
})
export class CreateGroupDialogComponent {
  constructor(public dialogRef: MatDialogRef<CreateGroupDialogComponent>) {  }
}

Sin embargo, aunque aparece el cuadro de diálogo cuando presiono el botón correspondiente, lo obtengo así:

La plantilla HTML no se muestra y las dimensiones del modal son incorrectas.

No veo cuál es el problema. ¿Por qué el modal no se dibuja correctamente?

Este es el código HTML generado al abrir el modal. Como se puede ver está vacío.