src/ui/dialog/smart-dialog.component.ts
A modal dialog component that supports remote templates and dynamic context
| selector | smart-dialog |
| styleUrls | ./smart-dialog.component.css |
| templateUrl | ./smart-dialog.component.html |
| viewProviders |
|
Properties |
Methods |
Inputs |
HostListeners |
Accessors |
constructor(factoryResolver: ComponentFactoryResolver, inj: Injector, dialogInstanceService: SmartDialogInstanceService)
|
||||||||||||
|
Parameters :
|
| buttons |
Type : string
|
|
A comma delimited list of buttons that should be visible on the dialog. |
| component |
Type : any
|
| context |
Type : any
|
| height |
Type : number
|
| hideCloseButton |
Type : boolean
|
|
If set to true, the Smart Dialog will hide the close (X) button. |
| injector |
Type : Injector
|
| opened |
Type : boolean
|
|
Indicates whether the dialog is opened. Updating this property will also hide/show the dialog accordingly. |
| smart-dialog-dependencies |
Type : any[]
|
Default value : []
|
|
(optional) Allows for injecting additional modules as imports in the resulting dialog component. |
| submit-on-enter |
Type : string
|
| templateRef |
Type : TemplateRef<any>
|
| textContent |
Type : string
|
| title |
Type : string
|
|
The dialog title. |
| width |
Type : number
|
| keyup |
Arguments : '$event'
|
keyup(event: KeyboardEvent)
|
| closeDialog | ||||||
closeDialog(button: DialogButtons)
|
||||||
|
Closes the dialog. param button
Parameters :
Returns :
void
|
| openDialog |
openDialog()
|
|
Displays the dialog. The returned promise resolves when the dialog has been closed, returning a DialogButtons value indicating which button has been clicked.
Returns :
Promise<DialogEvent>
|
| closeButton |
Type : DialogButtons
|
| container |
Type : SmartDialogContainer
|
Decorators :
@ViewChild(SmartDialogContainer)
|
| containerStyle |
Type : any
|
Default value : {}
|
| dialog |
Type : DialogComponent
|
Decorators :
@ViewChild(DialogComponent)
|
| dialogButtons |
Type : DialogButtons[]
|
Default value : []
|
|
The buttons displayed on the dialog, as objects. |
| dialogContext |
Type : any
|
Default value : {
templateUrl: null,
template: null,
opened: false,
title: '',
}
|
| dummyTemplate |
Type : TemplateRef<any>
|
Decorators :
@ViewChild('dummyTemplate', {read: TemplateRef, static: true})
|
| opened | ||||||
setopened(value: boolean)
|
||||||
|
Indicates whether the dialog is opened. Updating this property will also hide/show the dialog accordingly.
Parameters :
Returns :
void
|
| title | ||||||
settitle(value: string)
|
||||||
|
The dialog title.
Parameters :
Returns :
void
|
| width | ||||||
getwidth()
|
||||||
|
Returns :
number
|
||||||
setwidth(value: number)
|
||||||
|
Parameters :
Returns :
void
|
| height | ||||||
getheight()
|
||||||
|
Returns :
number
|
||||||
setheight(value: number)
|
||||||
|
Parameters :
Returns :
void
|
| buttons | ||||||
getbuttons()
|
||||||
|
Returns :
string
|
||||||
setbuttons(value: string)
|
||||||
|
A comma delimited list of buttons that should be visible on the dialog.
Parameters :
Returns :
void
|
<kendo-dialog
[ngClass]="{ 'no-close-btn': !!hideCloseButton }"
[width]="width"
[height]="height"
style="z-index: 9999;"
[title]="dialogContext.title"
*ngIf="dialogContext.opened === true && (dialogContext.template || templateRef || component || textContent)"
(close)="closeDialog(closeButton)">
<p *ngIf="!!textContent && !templateRef">{{textContent}}</p>
<div smartDialogContainer></div>
<kendo-dialog-actions *ngIf="dialogContext.opened">
<button kendoButton *ngFor="let btn of dialogButtons" primary="true" (click)="closeDialog(btn)">{{btn.toString()}}</button>
</kendo-dialog-actions>
</kendo-dialog>
<ng-template #dummyTemplate></ng-template>
./smart-dialog.component.css
/*
::ng-deep ::-webkit-scrollbar {
width: 2px;
height: 2px;
}
::ng-deep ::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::ng-deep ::-webkit-scrollbar-thumb {
background: #fb5942;
border: 0px none #ffffff;
border-radius: 50px;
}
::ng-deep ::-webkit-scrollbar-track {
background: #ffffff;
border: 0px none #ffffff;
border-radius: 50px;
}
::ng-deep ::-webkit-scrollbar-corner {
background: transparent;
}
*/
::ng-deep .padded {
padding-right: 20px !important;
}
/*
::ng-deep kendo-dialog-actions,
::ng-deep .k-action-buttons {
position: absolute!important;
bottom: 0!important;
width: 100%!important
}*/
::ng-deep .k-dialog-title {
overflow: visible !important;
}
::ng-deep .k-dialog.k-dialog-centered {
position: absolute !important;
}
::ng-deep .no-close-btn .k-window.k-dialog .k-dialog-titlebar.k-header .k-dialog-actions.k-window-actions a.k-button.k-bare.k-button-icon.k-window-action.k-dialog-action.k-dialog-close {
display: none !important;
}
/*
::ng-deep .k-content {
height: 80% !important;
}
*/