import { Component , Optional } from '@angular/core' ; import { MdDialog , MdDialogRef , MdSnackBar } from '@angular/material' ; @ Component ( { selector : 'material2-app-app' , templateUrl : 'app.component.html' , styleUrls : [ 'app.component.css' ] , } ) export class Material2AppAppComponent { isDarkTheme : boolean = false ; lastDialogResult : string ; foods : any [ ] = [ { name : 'Pizza' , rating : 'Excellent' } , { name : 'Burritos' , rating : 'Great' } , { name : 'French fries' , rating : 'Pretty good' } , ] ; progress : number = 0 ; constructor ( private _dialog , private _snackbar ) { setInterval ( ( ) => { this . progress = ( this . progress + Math . floor ( Math . random ( ) * 4 ) + 1 ) % 100 ; } , 200 ) ; } openDialog ( ) { let dialogRef = this . _dialog . open ( DialogContent ) ; dialogRef . afterClosed ( ) . subscribe ( result => { this . lastDialogResult = result ; } ) ; } showSnackbar ( ) { this . _snackbar . open ( 'YUM SNACKS' , 'CHEW' ) ; } } @ Component ( { template : `
    <p>This is a dialog</p>
    <p>
      <label>
        This is a text box inside of a dialog.
        <input #dialogInput>
      </label>
    </p>
    <p> <button md-button (click)="dialogRef.close(dialogInput.value)">CLOSE</button> </p>
  ` , } ) export class DialogContent { constructor ( @ Optional ( ) public dialogRef ) { } }