The Dialog (imperative)

Prerequisites

Every Dialog needs a place to be attached to the dom. The easiest way to achieve this is a dialog-outlet html element within your body element:

  
  ...
  
    ...
    
  

]]>

It is no problem, that this component is outside of your root app-component!

Technically: This place is determined by a ViewContainerRef. You may also set this ViewContainerRef in your code. Just inject the MdlDialogOutletService and call the setDefaultViewContainerRef method.

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. 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. The the login dialog example at the end of this page.

Alert

  
  let result = this.dialogService.alert('This is a simple Alert');
  result.then( () => console.log('alert closed') );

]]>

Confirm

  
  let result = this.dialogService.confirm('Would you like a mug of coffee?', 'No', 'Yes');
  result.then( choosedOption => console.log( choosedOption === ConfirmResult.Confirmed ) );

]]>

Confirm With Title

  
  let result = this.dialogService.confirm('Would you like a mug of coffee?', 'No', 'Yes', 'Excuse me');
  result.then( choosedOption => console.log( choosedOption === ConfirmResult.Confirmed ) );

]]>

Dialog with choises

  
  let pDialog = this.dialogService.showDialog({
    title: 'Your choice?',
    message: 'What drink do you prefer to your meal?',
    actions: [
      {
        handler: () => {
            this.snackbarService.showToast('Coke');
        },
        text: 'One Coke' ,
        isClosingAction: true
      },
      {
        handler: () => {
          this.snackbarService.showToast('Vine');
        },
        text: 'A bottle of vine'
      },
      {
        handler: () => {
          this.snackbarService.showToast('Beer');
        },
        text: 'A pint of beer'
      }
    ],
    fullWidthAction: true,
    isModal: false,
    openFrom: $event,
    closeTo: {
      left: document.body.offsetWidth/2,
      height: 0,
      top: document.body.offsetHeight/2,
      width: 0} as IOpenCloseRect
  });
  pDialog.then( (dialogReference) => console.log('dialog visible', dialogReference) );


]]>

A custom login dialog

The login dialog component

  
  @Component({
    selector: 'login-dialog',
    templateUrl: 'login-dialog.html'
  })
  export class LoginDialogComponent {

    constructor(private dialog: MdlDialogReference) {

      // register a listener if you want to be informed if the dialog is closed.
      this.dialog.onHide().subscribe( (user) => {
        console.log('login dialog hidden');
        if (user) {
          console.log('authenticated user', user);
        }
      });
    }

    public login() {
      console.log('login', this.dialog);
      this.dialog.hide();
    }

    @HostListener('keydown.esc')
    public onEsc(): void {
        this.dialog.hide();
    }
  }

]]>

The login dialog template

  
  
App Login
  

    
    

    
  
  

    Login
  

]]>

Open the dialog

  
  public showDialog() {

    let pDialog = this.dialogService.showCustomDialog({
      component: LoginDialogComponent,
      providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
      isModal: true,
      styles: {'width': '350px'},
      clickOutsideToClose: true,
      enterTransitionDuration: 400,
      leaveTransitionDuration: 400
    });
    pDialog.then( (dialogReference: MdlDialogReference) => {
      console.log('dialog visible', dialogReference);
    });
  }

]]>