github
DocsBlog
Chapters
fontcolor_theme
Desktop UI

Dialog

PreviewHTML
Open Dialog Open surenessConfirm please 0Absolute dialog

API <dui-dialog>(source)

searchclear

A dialog component that can be used to display content in a modal dialog.

<dui-dialog #dialog [maxWidth]="500">
    Hello World!
    <dui-button closeDialog>Abort</dui-button>
    <dui-button>OK</dui-button>
</dui-dialog>
<dui-button openDialog="dialog">Open Dialog</dui-button>
Name
Description 
@Input() backDropCloses?: boolean
@Input() center?: boolean
@Input() class?: string
@Input() component?: Type<any>
@Input() componentInputs?:
@Input() height?: string | number
@Input() maxHeight?: string | number
@Input() maxWidth?: string | number
@Input() minHeight?: string | number
@Input() minWidth?: string | number
@Input() noPadding?: boolean
@Input() normalize-style?: boolean
@Input() title?: string
@Input() visible?: boolean
@Input() width?: string | number
@Output() visibleChange?: boolean
actions: TemplateRef<any>
closed: EventEmitter<any>
container: TemplateRef<any>
open: EventEmitter<any>
overlayRef: OverlayRef
template: TemplateRef<any>
wrapperComponentRef: ComponentRef<DialogWrapperComponent>
close(v: any): void
setActions(actions?: TemplateRef<any>): void
setDialogContainer(container?: TemplateRef<any>): void
show(): void
toPromise(): Promise<any>

API [dialogContainer](source)

searchclear

Directive to lazy load a dialog container.

<dui-dialog #dialog>
  <ng-container *dialogContainer>
    Lazy loaded dialog content.
  </ng-container>
</dui-dialog>
Name
Description 
template: TemplateRef<any>

API [closeDialog](source)

searchclear

A directive to close the dialog on regular left click. Can be used inside a dialog to close it.

<dui-button closeDialog>Close</dui-button>
Name
Description 
@Input() closeDialog?: any

API [openDialog](source)

searchclear

A directive to open the given dialog on regular left click.

<dui-dialog #myDialog>
    Hi there!
</dui-dialog>
<dui-button openDialog="myDialog">Open Dialog</dui-button>
Name
Description 
@Input() openDialog?: DialogComponent
hiddenSub: Subscription
openSub: Subscription

API [confirm](source)

searchclear

Directive to show a confirmation dialog when the user clicks on the element.

<dui-button confirm="Really delete?" (click)="delete()">Delete</dui-button>
Name
Description 
@Input() confirm: string
The confirm message to show when the user clicks on the element. Use `Title\nText` to specify a title and text, separated by a newline.