The Dialog

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!

Alert
  Show Alert


]]>
Attributes of the mdl-alert component
Attribute Description
message The message the alert should display
okText The text of the ok button. Defaults to 'Ok'.
title The title of the alert - can be omitted.
confirmed Event will be triggered if the dialog is closed.
A custom Dialog - template
You can only show one intance of an embedded dialog.

Username: {{ username }}

Edit User

 
Edit User Dialog


  
Edit User

  

    
  

  

    
    
  


]]>
Attributes of the mdl-dialog component
Attribute Description
mdl-dialog-config Configuration for the dialog. See table below.
hide Event will be triggered if the dialog is hidden.
show Event will be triggered if the dialog is visible.
Dialog configuration object

Not all of these parameters are available for alert and confirm. If you need these parameters please use the showDialog method of the MdlDialogService to create these dialogs.

Property Description
isModal?: boolean true if the dialog should be opened as modal.
animate?: boolean true if the dialogs should animate. defaults to true.
classes?: string css classes as space delimted list of classes applied to the dialog-host component. (e.g. a b ->
styles?: {[key: string]: string} Key Value object with additional styles that will be applied to the dialog-host component. for example: {'width': '350px'}
clickOutsideToClose?:boolean Close the dialog if the user clicks on the backdrop.
openFrom?:
MdlButtonComponent |
MouseEvent |
IOpenCloseRect		 Use a show animation for the dialag that starts at a MdlButtonComponent, a MousEvent or a IOpenCloseRect. From all of these types the top, left, width and height will be used to create the starting point and startings size of the dialog animation.
closeTo?:
MdlButtonComponent |
MouseEvent |
IOpenCloseRect		 Use a show animation for the dialag that ends at a MdlButtonComponent, a MousEvent or a IOpenCloseRect. From all of these types the top, left, width and height will be used to create the end point and end size of the dialog animation.
enterTransitionDuration?: number Alter the the transition duration for the enter animation in ms. Defaults to 300ms.
enterTransitionEasingCurve?: string The easing curve for the enter animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)
leaveTransitionDuration?: number Alter the the transition duration for the leave animation in ms. Defaults to 250ms.
leaveTransitionEasingCurve?: string The easing curve for the leave animation. defaults to cubic-bezier(0.0, 0.0, 0.2, 1)