Skip to main content

ModalService

ModalService​

@vendure/admin-uimodal.service.ts

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

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

Dialog​

@vendure/admin-uimodal.types.ts

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.

DialogConfig​

@vendure/admin-uimodal.types.ts

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​

property
string

body​

property
string

translationVars​

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

buttons​

property
Array<DialogButtonConfig<T>>

size​

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

ModalOptions​

@vendure/admin-uimodal.types.ts

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​

property
boolean

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

locals​

property
Partial<T>

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