Awesome

Demo: https://ng-popups.carlosroso.com/

This repo was formerly known as ngx-cool-dialogs.

Features

• 🎩 Cross browser compatible
• 📱 Responsive
• 🐥 Easy to use
• 🔥 Highly configurable
• 👀 Good a11y and i18n support
• 💥 Support for Angular v9 and v10

Installation

npm i ng-popups @angular/cdk

Usage

Basic

1. Add the NgPopupsModule to your core module (e.g. app.module.ts). You can optionally pass a config object as the parameter of the forRoot method.

import { NgPopupsModule } from 'ng-popups';

@NgModule({
  ...,
  imports: [
    ...,
    NgPopupsModule.forRoot(globalConfig)
  ],
  ...
})
export class MyCoreModule { }

2. Inject the service NgPopupsService as a dependency of your component.

constructor(private ngPopups: NgPopupsService) {}

3. Make sure you have 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]
})

4. Use any of these three methods to create the dialogs: 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);
    }
  });

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.forRoot({
  theme: 'material', // available themes: 'default' | 'material' | 'dark'
  okButtonText: 'Yes',
  cancelButtonText: 'No',
  color: '#8030c3',
  titles: {
    alert: 'Danger!',
    confirm: 'Confirmation',
    prompt: 'Website asks...'
  }
});

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.

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.

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 © Carlos Roso

Shameless self promotion: This library was created using ng-lib-schematics, which is a Schematic I built to create Angular libraries.