// Tutorial //

Dialogs With Angular Material

Published on February 27, 2017
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
Dialogs With Angular Material

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

Choose an Emoji

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:

App Module: app.module.ts
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:

app.component.ts
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:

choose-emoji-dialog.html
<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:

choose-emoji-dialog.component.ts
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 🎉🐷

Angular Material Dialog


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!