Angular Material not working in Angular Dialog modal window

My Angular Material dialog window opens but the Material elements in the dialog window don’t work. Specifically,

<button mat-button-raised mat-dialog-close>Close</button>

doesn’t have the nice Material styling of a raised button (it’s just a plain gray HTML button) and the button doesn’t close the dialog window. It appears that Angular Material isn’t working in the dialog window. Angular Material is working fine in the view that the dialog opens into.

Here’s the template of the parent view:

<p>main works!</p>

<button mat-raised-button style="text-transform: uppercase" (click)="openDialog()">Login</button>

Here’s the template of the dialog window:

<h1 mat-dialog-title>Dialog with elements</h1>
<div mat-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
<div mat-dialog-actions>
  <button mat-button-raised mat-dialog-close>Close</button>
</div>

Here’s the class main.component.ts:

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(LoginDialog);
  }
}

@Component({
  selector: 'login-dialog',
  templateUrl: 'login-dialog.html',
})
export class LoginDialog {}

Is the problem that I’m not using MatDialogRef? I don’t understand what this does.

Source: Angular Material Quesions