Dialogs With Angular Material

We went over many of the available components with Angular Material, but dialogs were left out because they are a little bit more involved to setup than most of the other Angular Material components. So dialogs get their own post!

We’ll implement a simple dialog that allows you to choose an emoji. The component that cals the dialog will then get back the user’s choice:

First you’ll want to make sure that you have Angular Material setup correctly for your project. And here we’re also assuming that you have a project started with the Angular CLI.

Components for the Dialogs

With Angular Material your dialogs are separate components, so the first step will be to create a component for your dialog. With the Angular CLI, you can do something like this:

$ ng g component choose-emoji-dialog

Import the Dialog Component

Then you’ll want to import the dialog component in your app module and in the component that will call the dialog. In the app module you’ll also add the component into the declarations and entryComponents:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { ChooseEmojiDialogComponent } from './choose-emoji-dialog/choose-emoji-dialog.component';

Importing and Injecting MdDialog

In our main app component, the component that will call the dialog, let’s also import MdDialog and inject it into the class constructor:

import { Component } from '@angular/core';
import { ChooseEmojiDialogComponent }
  from './choose-emoji-dialog/choose-emoji-dialog.component';
import { MdDialog } from '@angular/material';

@Component({
  selector: 'app-root',
  template: <h1>Your Emoji</h1>
    <div *ngIf="selectedEmoji">{{ selectedEmoji }}</div>
    <button mat-raised-button (click)="openEmojiDialog()">
      Make a selection
    </button>,
  styles: [div {
    padding: 1rem;
  }]
})
export class AppComponent {
  selectedEmoji: string;
  constructor(public dialog: MdDialog) {}
  openEmojiDialog() {
    let dialog = this.dialog.open(ChooseEmojiDialogComponent);
dialog.afterClosed()
  .subscribe(selection => {
    if (selection) {
      this.selectedEmoji = selection;
    } else {
      // User clicked 'Cancel' or clicked outside the dialog
    }
  });

A few things to note:

• We open our dialog by calling open on our injected MdDialog instance and passing-in our dialog component.
• We grab the data returned from the dialog by subscribing to the observable that afterClosed returns and extracting the data.

Dialog Component

Our dialog component is pretty straightforward, and Angular Material provides us with a few directives to help style the dialog elements. Here’s our template markup:

<h1 mat-dialog-title>Choose Your Destiny:</h1>

<div mat-dialog-content>
  <mat-select [(ngModel)]="choosenEmoji">
    <mat-option *ngFor="let emoji of emojis" [value]="emoji">
      {{ emoji }}
    </mat-option>
  </mat-select>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="confirmSelection()" color="primary">
    Okays!
  </button>
  <button mat-button (click)="dialogRef.close()">
    Cancel
  </button>
</div>

Notice the few special directives used: mat-dialog-title, mat-dialog-content and mat-dialog-actions.

For the action buttons in the dialog to work properly, you’ll need to import MdDialogRef and inject it in the constructor to create a reference to the dialog:

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

@Component({
  selector: 'app-choose-emoji-dialog',
  templateUrl: './choose-emoji-dialog.component.html'
})
export class ChooseEmojiDialogComponent {
  emojis = ['🐼', '💪', '🐷', '🤖', '👽', '🐥'];
  choosenEmoji: string;
  constructor(public dialogRef: MdDialogRef<ChooseEmojiDialogComponent>) { }
  confirmSelection() {
    this.dialogRef.close(this.choosenEmoji);
  }

Our confirmSelection method closes the dialog, but also passes back the data we need.

And we now have a pretty material design dialog 🎉🐷