Ngx-material-popup NPM

NGX-Material-Popup

A collection of popup boxes for Angular built with Angular Material. It follows guidelines of Material Design, in particular Dialogs.

Installation

npm install --save ngx-material-popup

Use Example

ngx-material-popup exports 3 modules (alert, confirm, prompt). Import which one you'll want to use in your application.

import {
  AlertPopupModule,
  ConfirmPopupModule,
  PromptPopupModule
} from 'ngx-material-popup';

...
@NgModule({
  ...
  imports: [
    ...
    AlertPopupModule,
    ConfirmPopupModule,
    PromptPopupModule,
    ...
  ],
  ...
})
export class AppModule { }

Note: You can import these modules as well as in child modules.

Next, in your component inject services exported from ngx-material-popup - AlertPopup, ConfirmPopup, PromptPopup. For example:

constructor(
  ...
  private alertPopup: AlertPopup,
  private confirmPopup: ConfirmPopup,
  private promptPopup: PromptPopup,
  ...
) { }

Show an alert popup

To show an alert popup in browser: window.alert('Some message to display')

To show an alert popup with this library, you have to call:

this.alertPopup.show('Some message to display');

Show a confirm box

this.confirmPopup.show('Some question?');

Show a prompt dialog

this.promptPopup.show('Some question?', 'Initial value');

Prompt popups has textfields, which accordingly to mat-form-field can have multiple appearances. To override the appearance see example below:

providers: [
  ...
  { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
  ...
]

Configuring popups

All these popups can be configured in 2 ways: 1. Call show method with config object

this.alertPopup.show(config);
this.confirmPopup.show(config);
this.promptPopup.show(config);

Set default config in providers

providers: [
  ...
  { provide: ALERT_POPUP_CONFIG, useValue: { ... } },
  { provide: CONFIRM_POPUP_CONFIG, useValue: { ... } },
  { provide: PROMPT_POPUP_CONFIG, useValue: { ... } },
  ...
]

All configs are different for each type of popup: AlertPopupConfig, ConfirmPopupConfig and PromptPopupConfig.