ngx-sweetalert2

by sweetalert2

sweetalert2 /ngx-sweetalert2

Declarative, reactive, and template-driven SweetAlert2 integration for Angular

480 Stars 66 Forks Last release: 3 months ago (v8.1.1) MIT License 190 Commits 33 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

SweetAlert2

@sweetalert2/ngx-sweetalert2

Official SweetAlert2 integration for Angular

npm version Build Status license


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.

:point_right: Version 8 for Angular 9 is out! Attention, it is not compatible with Angular 8 AoT.

:point_right: Version 7 is out! If you come from v6.x, read the release notes!

:point_right: Before posting an issue, please check that the problem isn't on SweetAlert's side.



:package: Installation & Usage

1) Install ngx-sweetalert2 and sweetalert2 via the npm registry:

npm install --save sweetalert2 @sweetalert2/ngx-sweetalert2

:arrowdoubleup: Always upgrade SweetAlert2 when you upgrade ngx-sweetalert2. The latter is statically linked with SweetAlert2's type definitions.

Angular and SweetAlert2 versions compatibility table (click to show)
Angular version Latest compatible version range Required SweetAlert2 version range
Angular 9 @sweetalert2/[email protected]^8.1.1 (current) [email protected]^9.14.4
Angular 8 @sweetalert2/[email protected]~7.3.0 (:warning: NOT ~7.4.0, broken AoT metadata) [email protected]^9.7.0
Angular 7 @sweetalert2/[email protected]^5.1.0 [email protected]^8.5.0
Angular 6 @sweetalert2/[email protected]^5.1.0 [email protected]^8.5.0
Angular 5 @sweetalert2/[email protected]^5.1.0 [email protected]^8.5.0
Angular 4 @toverux/[email protected]^3.4.0 [email protected]^7.15.1
Angular 2 Try Angular 4 versions requirements, or older versions like @toverux/ngsweetalert2 unknown

2) Import the module:

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

@NgModule({ //=> Basic usage (forRoot can also take options, see details below) imports: [SweetAlert2Module.forRoot()],

//=> In submodules only:
imports: [SweetAlert2Module],

//=> In submodules only, overriding options from your root module:
imports: [SweetAlert2Module.forChild({ /* options */ })]

}) export class AppModule { }

That's it! By default, SweetAlert2 will be lazy-loaded, only when needed, from your local dependency of

sweetalert2
, using the
import()
syntax under the hood.

:link: API

SwalDirective

Add the

[swal]
attribute to an element to show a simple modal when that element is clicked.

To define the modal contents, you can pass a

SweetAlertOptions
(provided by sweetalert2) object, or a simple array of strings, of format

[title: string, text: string (, icon: string)]
.

Simple dialog:

  Do it!

More advanced (input in dialog, dismissal handling):

Set my e-mail address

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 } }

The directive can also take a reference to a

component for more advanced use cases:

  Delete {{ file.name }}


<swal ...>

SwalComponent

The library also provides a component, that can be useful for advanced use cases, or when you

[swal]
has too much options.

The component also allows you to use Angular dynamic templates inside the SweetAlert (see the

*swalPortal
directive for that).

Simple example:

With [swal]: Delete {{ file.name }}

Or DIY: Delete {{ file.name }}

You can access the dialog from your TypeScript code-behind like this:

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

You can pass native SweetAlert2 options via the

swalOptions
input, just in the case you need that:

By the way: every "special" option, like

swalOptions
, that are not native options from SweetAlert2, are prefixed with
swal
.

You can catch other modal lifecycle events than (confirm) or (cancel):

public onBeforeOpen(event: BeforeOpenEvent): void {
  // You can access the modal's native DOM node:
  console.log(event.modalElement);
}

SwalPortalDirective

The

*swalPortal
structural directive lets you use Angular dynamic templates inside SweetAlerts.

The name "portal" is inspired by React or Angular CDK portals. The directive will replace certain parts of the modal (aka. swal targets) with embedded Angular views.

This allows you to have data binding, change detection, and use every feature of the Angular template syntax you want, just like if the SweetAlert was a normal Angular component (it's not at all).

  
{{ elapsedSeconds }} seconds elapsed since the modal was opened.

Using a structural directives allows us to take your content as a template, instantiate it lazily when needed (ie. when the modal is shown), and putting it in a native DOM element that is originally outside the scope of your Angular app.

This examples sets the main content of the modal, where the

text
property is usually rendered when SweetAlert2 is in charge. But you can also target the title, the footer, or even the confirm button, and more!

You just have to change the target of the portal (

content
is the default target). First, inject this little service in your component:

import { SwalPortalTargets } from '@sweetalert2/ngx-sweetalert2';

export class MyComponent { public constructor(public readonly swalTargets: SwalPortalTargets) { } }

And then, set the appropriate target as the value of

*swalPortal
, here using two portals, the first one targeting the modal's content (this is the default), and the other one targeting the confirm button text.
  
  
    ...
  

  
  
    Send ({{ secondsLeft }} seconds left)
  

We have the following targets:

closeButton
,
title
,
content
,
actions
,
confirmButton
,
cancelButton
, and
footer
.

These targets are mostly provided by SweetAlert2 and made available in the right format for swal portals by this library, but you can also make your own if you need to (take inspiration from the original service source). Those are just variables containing a function that returns a modal DOM element, not magic. The magic is inside the directive ;)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.