Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caroso1222/ng-popups
🎉 Alert, confirm and prompt dialogs for Angular. Simple as that.
https://github.com/caroso1222/ng-popups
alert angular confirmation dialog modal prompt
Last synced: 6 days ago
JSON representation
🎉 Alert, confirm and prompt dialogs for Angular. Simple as that.
- Host: GitHub
- URL: https://github.com/caroso1222/ng-popups
- Owner: caroso1222
- License: mit
- Created: 2018-02-16T04:09:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T21:39:54.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T13:45:43.002Z (13 days ago)
- Topics: alert, angular, confirmation, dialog, modal, prompt
- Language: TypeScript
- Homepage: https://ng-popups.carlosroso.com/
- Size: 4.78 MB
- Stars: 83
- Watchers: 7
- Forks: 9
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
NgPopups
[](https://badge.fury.io/js/ng-popups)
[](LICENSE)
[](https://github.com/caroso1222/ng-popups/pulls)
[](https://travis-ci.org/caroso1222/ng-popups)
Alert, confirm and prompt dialogs for Angular
**Demo:** [https://ng-popups.carlosroso.com/](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.
```typescript
import { NgPopupsModule } from 'ng-popups';
@NgModule({
...,
imports: [
...,
NgPopupsModule.forRoot(globalConfig)
],
...
})
export class MyCoreModule { }
```
2. Inject the service `NgPopupsService` as a dependency of your component.
```typescript
constructor(private ngPopups: NgPopupsService) {}
```
3. Make sure you have `BrowserAnimationsModule` imported in your root module (e.g. `app.module.ts`).
```typescript
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`.
```typescript
// 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.
```javascript
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.
```javascript
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](https://twitter.com/caroso1222), 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](https://carlosroso.com/)
---
**Shameless self promotion:** This library was created using [ng-lib-schematics](https://github.com/caroso1222/ng-lib-schematics),
which is a [Schematic](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2) I built to create Angular libraries.