A Beautiful, Responsive, Customizable, Accessible (Wai-Aria) Replacement For Javascript'S Popup Boxes. Read the official ngx-sweetalert2 Documentation for a full list of instructions and other options.

Basic Examples

SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below!

Position

You can specify position of your alert with [position]=" top-start | top-end | bottom-start | bottom-end " property of swal component.

Animations

Use [customClass] property of swal component to get custom animation & disable default animation of alert by adding [animation]="false".

Types

SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". It can either be put in the object under the key "icon" or passed as the third parameter of [swal] directive..

Custom Image

Use [swalOptions] directive and pass object with imageUrl, imageWidth, imageHeight, imageAlt keys with there respective value to get custom icon or image.

Auto Close

To auto close the alert use [timer] property of swal component and pass value in milliSeconds.

Question

use (beforeOpen) event property of swal component to get called before the alert gets executed & get access the modal's native DOM to customize it.

Ajax

Use (open) event property of swal component to get called when alert gets executed& get access the modal's native DOM to customize it.

Confirm Button Text

Use confirmButtonText property as argument to change the text on the "Confirm" button.

Confirm Button Color

Use confirmButtonColor property as argument to change the background color on the "Confirm" button.