ModalService
ModalService
This service is responsible for instantiating a ModalDialog component and embedding the specified component within.
Signature
class ModalService {
constructor(componentFactoryResolver: ComponentFactoryResolver, overlayHostService: OverlayHostService)
fromComponent(component: Type<T> & Type<Dialog<R>>, options?: ModalOptions<T>) => Observable<R | undefined>;
dialog(config: DialogConfig<T>) => Observable<T | undefined>;
}
Members
constructor
method
type:
(componentFactoryResolver: ComponentFactoryResolver, overlayHostService: OverlayHostService) => ModalService
fromComponent
method
type:
(component: Type<T> & Type<Dialog<R>>, options?: ModalOptions<T>) => Observable<R | undefined>
Create a modal from a component. The component must implement the Dialog interface. Additionally, the component should include templates for the title and the buttons to be displayed in the modal dialog. See example:
Example
class MyDialog implements Dialog {
resolveWith: (result?: any) => void;
okay() {
doSomeWork().subscribe(result => {
this.resolveWith(result);
})
}
cancel() {
this.resolveWith(false);
}
}
Example
<ng-template vdrDialogTitle>Title of the modal</ng-template>
<p>
My Content
</p>
<ng-template vdrDialogButtons>
<button type="button"
class="btn"
(click)="cancel()">Cancel</button>
<button type="button"
class="btn btn-primary"
(click)="okay()">Okay</button>
</ng-template>
dialog
method
type:
(config: DialogConfig<T>) => Observable<T | undefined>
Displays a modal dialog with the provided title, body and buttons.
Dialog
Any component intended to be used with the ModalService.fromComponent() method must implement this interface.
Signature
interface Dialog<R = any> {
resolveWith: (result?: R) => void;
}
Members
resolveWith
property
type:
(result?: R) => void
Function to be invoked in order to close the dialog when the action is complete.
The Observable returned from the .fromComponent() method will emit the value passed
to this method and then complete.
DialogConfig
Configures a generic modal dialog.
Signature
interface DialogConfig<T> {
title: string;
body?: string;
translationVars?: { [key: string]: string | number };
buttons: Array<DialogButtonConfig<T>>;
size?: 'sm' | 'md' | 'lg' | 'xl';
}
Members
title
property
type:
string
body
property
type:
string
translationVars
property
type:
{ [key: string]: string | number }
buttons
property
type:
Array<DialogButtonConfig<T>>
size
property
type:
'sm' | 'md' | 'lg' | 'xl'
ModalOptions
Options to configure the behaviour of the modal.
Signature
interface ModalOptions<T> {
size?: 'sm' | 'md' | 'lg' | 'xl';
verticalAlign?: 'top' | 'center' | 'bottom';
closable?: boolean;
locals?: Partial<T>;
}
Members
size
property
type:
'sm' | 'md' | 'lg' | 'xl'
Sets the width of the dialog
verticalAlign
property
type:
'top' | 'center' | 'bottom'
Sets the vertical alignment of the dialog
closable
property
type:
boolean
When true, the “x” icon is shown
and clicking it or the mask will close the dialog
locals
property
type:
Partial<T>
Values to be passed directly to the component being instantiated inside the dialog.