Tutorial

Dialogs With Angular Material

Published on February 27, 2017
author

Alligator.io

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel