π Alert, confirm and prompt dialogs for Angular. Simple as that.
MIT License
Demo: https://ng-popups.carlosroso.com/
This repo was formerly known as ngx-cool-dialogs.
npm i ng-popups @angular/cdk
NgPopupsModule
to your core module (e.g. app.module.ts
). You can optionallyforRoot
method.import { NgPopupsModule } from 'ng-popups';
@NgModule({
...,
imports: [
...,
NgPopupsModule.forRoot(globalConfig)
],
...
})
export class MyCoreModule { }
NgPopupsService
as a dependency of your component.constructor(private ngPopups: NgPopupsService) {}
BrowserAnimationsModule
imported in your root module (e.g. app.module.ts
).import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...
@NgModule({
declarations: [ ... ],
imports: [
...,
BrowserAnimationsModule,
...
],
providers: [ ... ],
bootstrap: [AppComponent]
})
alert
, confirm
, prompt
.// Alert
this.ngPopups.alert('Whoa boy, be careful!');
// Confirm
this.ngPopups.confirm('Do you blindly accept our conditions?')
.subscribe(res => {
if (res) {
console.log('You clicked OK. You dumb.');
} else {
console.log('You clicked Cancel. You smart.');
}
});
// Prompt. Callback param has the following form:
// { result: boolean, value: string }
this.ngPopups.prompt('Please type your email below.')
.subscribe(res => {
if (res.result) {
console.log('Thanks, now we have your email:', res.value);
}
});
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.forRoot({
theme: 'material', // available themes: 'default' | 'material' | 'dark'
okButtonText: 'Yes',
cancelButtonText: 'No',
color: '#8030c3',
titles: {
alert: 'Danger!',
confirm: 'Confirmation',
prompt: 'Website asks...'
}
});
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.
this.ngPopups.confirm('Do you agree to follow Barça?', {
theme: 'dark',
okButtonText: 'Yes, I do',
cancelButtonText: 'Nope',
color: 'red',
title: 'Wait, think twice'
});
Note: When using prompt
, you can also set the defaultText
property which will be used to
autofill the text input.
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
.
MIT Β© Carlos Roso
Shameless self promotion: This library was created using ng-lib-schematics, which is a Schematic I built to create Angular libraries.