NgSweetAlert2

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 via the npm registry:

npm install sweetalert2 --save
npm install @imolinelli/ngsweetalert2 --save

2. Then, import SweetAlert's CSS file, exactly like you're doing usually with vendor styles. Could be a TypeScript import with Webpack, a SASS @import, or even a <link> tag: that depends of you build system.

3. Finally, import the module:

import { SweetAlert2Module } from '@imolinelli/ngsweetalert2';

@NgModule({
    imports: [SweetAlert2Module],
    
    // OR provide default options, for example make Swal more Bootstrap-looking:
    imports: [
        SweetAlert2Module.forRoot({
            buttonsStyling: false,
            customClass: 'modal-content',
            confirmButtonClass: 'btn btn-lg btn-primary',
            cancelButtonClass: 'btn btn-lg'
        })
    ]
})
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), or a simple array of strings, of format [title: string, text: string (, type: string)].

class __API__ {
    @Input() public set swal(options: SweetAlertOptions|SimpleSweetAlertOptions);

    @Output() public confirm: EventEmitter<any>;
    @Output() public cancel: EventEmitter<any>;
}

Simple confirmation dialog:

<button [swal]="['Delete?', 'This cannot be undone.', 'warning']" (confirm)="deleteFile(file)">
  Delete {{ file.name }}
</button>

More advanced (input in dialog, dismissal handling):

<button [swal]="{ title: 'Enter your email', input: 'email' }"
        (confirm)="saveEmail($event)"
        (cancel)="handleRefusalToSetEmail($event)">
  Set my e-mail address
</button>

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.

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<any>;
    @Output() public cancel: EventEmitter<any>;
    
    public show(): Promise<any>;
}

Simple example:

<swal #dialog title="..." type="info"></swal>
<button (click)="dialog.show().then(goToProfile)">Go to my profile</button>

Or:
<swal #dialog title="..." type="info" (confirm)="goToProfile()" (cancel)="doSomethingElse()"></swal>
<button (click)="dialog.show()>Go to my profile</button>

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:

class MyComponent {
    @ViewChild('dialog') private swalDialog: SwalComponent;
}

You can pass more SweetAlert2-native options via the options input:

<swal #dialog [options]="{ confirmButtonText: 'I understand' }"></swal>