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

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

---

Serving demo app

Run npm start to start demo app server. Navigate to http://localhost:4200/.

Build

Run npm run build to build the library. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm test to execute the unit tests via Karma.

Author

Andrei Digori

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.