NgPopups
Easily create alert, confirm and prompt dialogs for Angular. Think of window.alert
or window.confirm
, but more angularish and way prettier.
Demo: https://ngx-cool-dialogs.carlosroso.com/
Features
- Cross browser compatible
- Responsive
- Easy to use
- Highly configurable
- Packaged with the official Angular format
- Good a11y and i18n support
Installation
npm i ng-popups @angular/cdk
Usage
Basic
- Add the
NgPopupsModule
to your core module (e.g.app.module.ts
). You can optionally pass a config object as the parameter of theforRoot
method.
;
- Inject the service
NgPopupsService
as a dependency of your component.
constructorprivate ngPopups: NgPopupsService
- Make sure you have
BrowserAnimationsModule
imported in your root module (e.g.app.module.ts
).
;...
- Use any of these three methods to create the dialogs:
alert
,confirm
,prompt
.
// Alertthis.ngPopups.alert'Whoa boy, be careful!'; // Confirmthis.ngPopups.confirm'Do you blindly accept our conditions?' .subscribe; // Prompt. Callback param has the following form:// { result: boolean, value: string }this.ngPopups.prompt'Please type your email below.' .subscribe;
Advanced
Global configuration
You can globally configure all your dialogs for properties like titles, texts and colors. Do this
by passing a config object in the forRoot
module declaration (see step 1).
NgPopupsModule.forRoot(globalConfig: NgPopupsGlobalConfig)
NgPopupsGlobalConfig
Find below an example of a global config object. Please note that all these properties are optional. Please check out the SOURCE for full descriptions of all properties and its allowed and default values.
NgPopupsModule;
Local configuration
You can also pass a configuration object to the methods alert()
, confirm()
and prompt()
as the
second argument. Any property set here will obviously override the corresponding global configuration.
NgPopupsLocalConfig
The configuration example below applies for any of the three main methods. Please check out the SOURCE for full descriptions of all properties and its allowed and default values.
thisngPopups;
Note: When using prompt
, you can also set the defaultText
property which will be used to
autofill the text input.
Contributing
Feel free to open issues, shoot PRs, reach out on twitter, etc.
This is really just a good ol' Angular CLI project. Feel free to clone the project and play around if you feel like adding new features or fixing bugs.
Run the demo via npm start
. All the library code lies inside projects/ng-popups
.
Licence
MIT
Shameless self promotion: This library was created using ng-lib-schematics, which is a Schematic I built to create Angular libraries.