# Ng[SweetAlert2](https://github.com/limonte/sweetalert2) [![npm version](https://img.shields.io/npm/v/@toverux/ngsweetalert2.svg?style=flat-square)](https://www.npmjs.com/package/@toverux/ngsweetalert2) ![license](https://img.shields.io/github/license/toverux/ngsweetalert2.svg?style=flat-square) ![npm total downloads](https://img.shields.io/npm/dt/@toverux/ngsweetalert2.svg?style=flat-square) [SweetAlert2](https://github.com/limonte/sweetalert2) integration for Angular. This is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque utilities on top of it. **Before posting an issue**, please check that the problem isn't on SweetAlert's side. This is just a directive/component wrapper around Swal2. ## :package: Installation & Usage 1) Install NgSweetAlert2 and SweetAlert2 via the npm registry: ```bash npm install --save sweetalert2 @toverux/ngsweetalert2 ``` 2) Then, import SweetAlert's CSS (or SCSS) file, exactly like you're doing usually with vendor styles. Could be a TypeScript `import` with Webpack, a SASS `@import`, or even a `` tag: that depends of you build system. Its path is `node_modules/sweetalert2/dist/sweetalert2.css`. 3) Finally, import the module: ```typescript import { SweetAlert2Module } from '@toverux/ngsweetalert2'; @NgModule({ //=> Basic usage imports: [SweetAlert2Module.forRoot()], //=> Or provide default SweetAlert2-native options // (here we make Swal more Bootstrap-friendly) imports: [ SweetAlert2Module.forRoot({ buttonsStyling: false, customClass: 'modal-content', confirmButtonClass: 'btn btn-lg btn-primary', cancelButtonClass: 'btn btn-lg' }) ], //=> In submodules only: imports: [SweetAlert2Module] }) export class AppModule { } ``` ## :link: API ### `SwalDirective` Adding the `[swal]` attribute to an element will attach the directive to it. The directive will listen for `click` events and display a SweetAlert modal, configured using the options you pass to the attribute. The options are of type [`SweetAlertOptions` (provided by sweetalert2)](https://github.com/limonte/sweetalert2/blob/master/sweetalert2.d.ts#L204), or a simple array of strings, of format `[title: string, text: string (, type: string)]`. ```typescript class __API__ { @Input() public set swal(options: SweetAlertOptions|SimpleSweetAlertOptions); @Output() public confirm: EventEmitter; @Output() public cancel: EventEmitter; } ``` Simple confirmation dialog: ```html ``` More advanced (input in dialog, dismissal handling): ```html ``` ```typescript export class MyComponent { public saveEmail(email: string): void { // ... save user email } public handleRefusalToSetEmail(dismissMethod: string): void { // dismissMethod can be 'cancel', 'overlay', 'close', and 'timer' // ... do something } } ``` ### `SwalComponent` The library also provides a component, that can be useful for displaying other dialogs than confirmation ones. Others can prefer to use that to avoid having dialog-related logic in their codebehind. ```typescript class __API__ { @Input() public type: SweetAlertType; @Input() public title: string; @Input() public text: string; @Input() public html: string; @Input() public options: SweetAlertOptions; @Output() public confirm: EventEmitter; @Output() public cancel: EventEmitter; public show(): Promise; } ``` Simple example: ```html Or: ``` If you decide to use the `show().then(...)` form, remember that you'll have to handle the promise rejection if the modal is dismissable, or you'll get an "uncaught promise rejection" in your console. If you use the `(confirm)="handler()"` form, `(cancel)` is optional. You can also access the dialog from your codebehind: ```typescript class MyComponent { @ViewChild('dialog') private swalDialog: SwalComponent; } ``` You can pass more SweetAlert2-native options via the `options` input: ```html ```

	Stars	Issues	Version	Updated	Created
@toverux/ngsweetalert2	640	11	2.0.1	7 years ago	7 years ago
@toverux/ngx-sweetalert2	640	11	4.0.0	6 years ago	6 years ago
ngx-sweetalert2	2	1	0.2.7	6 years ago	7 years ago

@toverux/ngsweetalert2 vs @toverux/ngx-sweetalert2 vs ngx-sweetalert2

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past