Angular Material Dialog

Angular is an awesome framework, yet it does have a steep learning curve for many developers. This post is aimed at those with experience using Angular 2/4/5 who want to use the Angular Material Dialog.

This post will assume you have already installed the @angular/material library. If you have I would refer you to take a look at the following: https://material.angular.io/guide/getting-started.

Below you can find the example code used to create the Angular Material Dialog. All the code below will be the same file.

Angular Material Dialog

import {Component, Inject, Input} from '@angular/core'; 
import {MAT_DIALOG_DATA, MatDialog, MatDialogConfig, MatDialogRef} from "@angular/material";

@Component({
    moduleId: module.id,
    selector: 'base-component',
    template: `
       <h1>This is the base template</h1>
       <button (click)="openDialog()">Click Me!</button>
    `,
})

export class BaseComponent {
    openDialog(): void {
        let dialogRef = this.dialog.open(FavoriteAnimalComponent, <MatDialogConfig>{
            width: '450px',
            height: '500px'
        });

        dialogRef.afterClosed().subscribe(result => {
            alert('You said your favorite animal is: ' + result);
        });
    }
}

/**
 * The Dialog Component 
 */
@Component({
    moduleId: module.id,
    selector: 'favorite-animal',
    template: `
        <h1>Whats your favorite animal?</h1>
        <input type="text" [(ngModel)]="animal">
        <button [mat-dialog-close]="animal" cdkFocusInitial>Choose</button>
 `;
})

export class FavoriteAnimalComponent {

   public animal: string;

}

Whats next

After you have created your components, you will need to add the FavoriteAnimalComponent to your modules entryComponents array, as this should solve any ZoneAware errors that may occur.