ModalService

Package: @vendure/admin-ui File: modal.service.ts

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

Package: @vendure/admin-ui File: modal.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;
}

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

Package: @vendure/admin-ui File: modal.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';
}

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

Package: @vendure/admin-ui File: modal.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>;
}

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.