Angular Material Dialog

by Dillon -

Angular

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.

 

Dillon Smart

šŸ‘‹ Hey, I'm Dillon!

Iā€™m a Full-Stack developer in the UK, building websites and applications for around 12 years, landing my first full-time job as a developer in 2015.

Feel free to reach out on Twitter!

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.