ModalService

This service is responsible for instantiating a ModalDialog component and embedding the specified component within.

Signature

class ModalService {    constructor(overlayHostService: OverlayHostService)    fromComponent(component: Type<T> & Type<Dialog<R>>, options?: ModalOptions<T>) => Observable<R | undefined>;    dialog(config: DialogConfig<T>) => Observable<T | undefined>;}

constructor

method(overlayHostService: OverlayHostService) => ModalService

fromComponent

method(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

Html

<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(config: DialogConfig<T>) => Observable<T | undefined>

Displays a modal dialog with the provided title, body and buttons.

@vendure/admin-ui Source

Any component intended to be used with the ModalService.fromComponent() method must implement this interface.

Signature

interface Dialog<R = any> {    resolveWith: (result?: R) => void;}

resolveWith

property(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.

@vendure/admin-ui Source

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';}

title

propertystring

body

propertystring

translationVars

property{ [key: string]: string | number }

buttons

propertyArray<DialogButtonConfig<T>>

size

property'sm' | 'md' | 'lg' | 'xl'

@vendure/admin-ui Source

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>;}

size

property'sm' | 'md' | 'lg' | 'xl'

Sets the width of the dialog

verticalAlign

property'top' | 'center' | 'bottom'

Sets the vertical alignment of the dialog

closable

propertyboolean

When true, the "x" icon is shown and clicking it or the mask will close the dialog

locals

propertyPartial<T>

Values to be passed directly to the component being instantiated inside the dialog.