How to configure dialogs with the MdlDialogService or mdl-dialog component

A new version of Angular 2 Material Design Lite (demo github) has been released today. Now you can configure a lot more of the ui. For example css styles or css classes.

The MdlDialog

As you might know there are two ways how one can use the MdlDialog. You can use the MdlDialogService or the mdl-dialog component. Under the hood angular2-mdl creats a dialog host component where your dialogs will be attached to. This makes it easy to use but a little bit difficult to customise. The current version of angular2-mdl allows you now to configure a lot more aspects of the ui than former version:

• The property animate allows you to specify whether the dialog should be animate on show up and dissapear or not.
• You can now add any css class to the dialog. Just provide a space separated list of classes for the classes property.
• A long awaited possibility is to specify the width of the MdlDialog. You can now achieve this by providing additional css styles to the `style property.
• Another important feature is the possibility to specify whether the diloag (must be modal) should close if the user clicks outside the dialog (clickOutsideToClose).

Imperative Usage

If you create your dialogs with the MdlDialogService you just provide additional configuration parameter:

dialogService.showCustomDialog({
  component: LoginDialogComponent,
  animate: false,
  isModal: true,
  classes: 'a b',
  styles: {'width': '350px'},
  clickOutsideToClose: true
});

Declarative Usage

For the declarative usage you need to provide a configuration object to mdl-dialog-config:

<mdl-dialog #editUserDialog
            [mdl-dialog-config]="{clickOutsideToClose: true, styles:{'width': '350px'}, isModal:true}"
            (show)="onDialogShow(dialogRef)"
            (hide)="onDialogHide()">
...
</mdl-dialog>

If you are missing a feature create a github issue and let us discuss your needs.