Working example of Angular 2.0 Material MdDialog with Angular 2.0

Update to angular v4 and @angular/material 2.0.0-beta.12

md prefix was changed to mat

Import MatDialogModule instead of MdDialogModule

@angular/material now depends on @angular/cdk as a peer dependency.

Recap: Plunkr

8 steps to Material Dialog + Appendix

Step 1:Install package

npm i --save @angular/material @angular/cdk @angular/animations

Step 2:Configure systemjs.config.js

map: {  ...  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',  '@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',  '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',  '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',  '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',  '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',  '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',  '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',  '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',  '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',  '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',  '@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js',  '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',  '@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',  '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk/bundles/cdk-stepper.umd.js',},

Step 3:Import MatDialogModule to your module

import { MatDialogModule } from '@angular/material';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';@NgModule({  imports: [     BrowserModule,    BrowserAnimationsModule, <== required    MatDialogModule <== here  ],  declarations: [ AppComponent],  bootstrap: [ AppComponent ]})export class AppModule {}

Step 4:Create desired dialog component like:

@Component({  selector: 'your-dialog-selector',  template: `  <h2>Hi! I am modal dialog!</h2>  <button mat-raised-button (click)="dialogRef.close()">Close dialog</button>`})export class DialogComponent {  constructor(public dialogRef: MdDialogRef<DialogComponent>) { }}

Step 5:Add the component from step 4 to declarations and entryComponents arrays of your NgModule decorator:

@NgModule({  imports: [ BrowserModule, MatDialogModule ],  declarations: [ AppComponent, DialogComponent ],  entryComponents: [ DialogComponent ],  bootstrap: [ AppComponent ]})export class AppModule {}

Step 6:Use it in your component:

@Component({  selector: 'my-app',  template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,})export class App {  constructor(public dialog: MatDialog) { }  openDialog(key) {    let dialogRef = this.dialog.open(DialogComponent);  }}

Step 7Pick out the desired theme:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css"   rel="stylesheet">

Other themes you can find here

Step 8

If you want to pass data to modal then use the following (Plunker):

dialogRef.componentInstance.param1 = "test value";

Appendix

Routed Dialog: Plunkr

Draggable Dialog (How can i make a MatDialog draggable / Angular Material)

Plunker Example

See also

• Material.Angular.io > Guides > Getting Started
• Master builds