Display a simple alert dialog in Material Angular

I'm using Material Angular (from Angular Material). The examples in the site seem a Little too overcomplicated and every other tutorial in the internet seems either outdated or to be using AngularJS instead. How can I show a simple alert (just like Android's AlertDialog) with a title, a message and a confirm/cancel button?

Here's a simple example as you requested:

(Assuming the following structure)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Explanation of the above code:

[matDialogTitle] / [mat-dialog-title]: A directive (typically used on a h2 element) for indicating the dialog's title.
[matDialogContent] / [mat-dialog-content] / mat-dialog-content: A directive indicating the dialog's content.
[matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: A directive indicating the dialog's action(s).
[matDialogClose] / [mat-dialog-close]: A directive (typically used on a button element) indicating that this element when clicked on should close the dialog. Optionally, this directive can include a parameter (of any type) which can be then passed to the component who opened this dialog.

my-alert-dialog.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-alert-dialog', // Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
})
export class MyAlertDialogComponent { }

app.component.ts (redacted)

import { MatDialog } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent {
  constructor(private dialog: MatDialog) { }
  unregister() {
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') {
        console.log('Unregistered');
      }
    })
  }
}

app.module.ts (redacted)

import { MatDialogModule } from '@angular/material';
import { MyAlertDialogComponent } from './my-alert-dialog/my-alert-dialog.component';

@NgModule({
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
    MyAlertDialogComponent
  ]
})
export class AppModule { }

Demo