How to use the MdlDialogService (version 1.x)

#How to use the MdlDialogService

Caution! The API may change in future releases!

##Prerequisites

Every Dialog needs a place where it would be attached to. This place is determined by a ViewContainerRef. The most suitable ViewContainerRef is the ViewContainerRef of your root app (e.g. your bootstrap or entry component). Because the dialogs are open with a service you may inject this service in your root app and call setDefaultViewContainerRef to set the ViewContainerRef for all dialogs of your application:

import { ViewContainerRef } from '@angular/core';
import { MdlDialogService } from 'angular2-mdl';

...
export class AppComponent {

   constructor(private vcRef: ViewContainerRef, private dialogService: MdlDialogService) {
      dialogService.setDefaultViewContainerRef(vcRef);
   }

}

You also can provide a special ViewContainerRef to every showDialog - function. But this is not recommended.

If you want to create a custom dialog - e.g. you have full control regarding the content of the dialog - you need to implement a component. This component must implement the interface IMdlCustomDialog and you need to add this component to the entryComponents of your app module! Also you should implement an event lister that closes the dialog if the users hits the esc key.