New: Headless Commerce with Remix! read more

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

Members

title

property
type:
string

body

property
type:
string

translationVars

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

buttons

property
type:
Array<DialogButtonConfig<T>>

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.