Angular 13 Custom Popup Notification with SweetAlert2

Angular custom popup notification tutorial helps you find out how to create and implement custom popup notification such as alerts, notifications and confirm dialog or modal popover in angular using SweetAlert2 package.

Popup notifications are a better way of displaying relevant messages, at the perfect time to the site visitors. You can convey the vital information to users which has the high priority.

Building popovers with SweetAlert is not just comfortable but highly customizable, and we will show you to what extent we can elevate the popup boxes.

SweetAlert2 is a compelling JavaScript-based plugin allows creating beautiful, responsive, customizable, accessible popup boxes pretty quickly. It doesn’t require any third-party dependencies.

You get responsive mobile ready modal boxes which is useful for displaying alert messages in a popup box.

Angular 13 Custom Popup Notification Example

  • Step 1: Set Up Angular Environment
  • Step 2: Setting Up Sweetalert2 Package
  • Step 3: Create Alert Messages with Popup Boxes (Success, Error, Warning, Info)
  • Step 4: Create Simple Popup Box
  • Step 5: Display Error Message in Alert Box
  • Step 6: Display Success Message in Alert Box
  • Step 7: Display Info Message in Alert Box
  • Step 8: Show Confirmation Alert Box
  • Step 9: Set Popover Box Position
  • Step 10: Add Custom Animation in Popup Box
  • Step 11: Test Angular Alert Boxes

Set Up Angular Environment

You have to start with installing the angular cli using the following command:

npm install -g @angular/cli

After that, open terminal window and install a new angular application with the following schematic:

ng new angular-alert-box-examle

Next, move to applicaiton root:

cd angular-alert-box-examle

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Setting Up Sweetalert2 Package

Installing the SweetAlert2 is so much simple all you need the following command:

npm install sweetalert2

To create aesthetically eye-catching notification popup boxes requires adding the sweetalert CSS in angualr.json file:

"styles": [
      "src/styles.css",
      "node_modules/sweetalert2/src/sweetalert2.scss"
    ],

Create Alert Messages with Popup Boxes (Success, Error, Warning, Info)

Subsequently, you have to open app.component.ts file, similarly import the Swal from ‘sweetalert2/dist/sweetalert2.js’ module at the top.

import Swal from 'sweetalert2/dist/sweetalert2.js';

The Swal module gives you fire() event which triggers the alert boxes in an angular. Similarly, you can pass multiple options to enable and set the various features in alert boxes.

Build Simple Popup Box

Creating an essential pop up with a simple message is merely possible with fire() method, you have to pass the message that needs to be displayed to the site visitors.

simpleAlertBox() {
    Swal.fire('Hello, Admin');
}

Simple Popup Box

Display Error Message in Alert Box

Three parameters have to be declared as a string; the first argument is the title; the second parameter is the message, and the thrids parameter is the type of the alert box.

errorAlertBox() {
    Swal.fire('Oops', 'An error occured', 'error');
}

Error Alert Box

Display Success Message in Alert Box

successAlertBox() {
    Swal.fire('Whooa!', 'Order has been proceeded!', 'success')
}

Success Alert Box

Display Info Message in Alert Box

infoAlertBox() {
    Swal.fire('Hey!', 'We have got something for you', 'info')
}

Alert Info Box

Show Confirmation Alert Box

alertConfirmation() {
    Swal.fire({
        title: 'Buy Product X',
        text: 'This product is invincible.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'No'
    }).then((result) => {
        if (result.value) {
            Swal.fire(
                'Removed!',
                'Product has removed.',
                'success'
            )
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire(
                'Cancelled',
                'Sorry to see you go.)',
                'error'
            )
        }
    })
}

Confirmation Alert Box

Next, you have to open the angular HTML template and define the buttons and attach click events to show the alert boxes we have created:

<button (click)="simpleAlertBox()">Simple Alert</button>

<button (click)="errorAlertBox()">Error Alert</button>

<button (click)="successAlertBox()">Sucess Alert</button>

<button (click)="infoAlertBox()">Info Alert</button>

<button (click)="alertConfirmation()">Alert Confirmation</button>

Set Popover Box Position

You can adjust the popup notification modal boxes position luckily here are the provided options for Popup window positions.

  • ‘top’
  • ‘top-start’
  • ‘top-end’
  • ‘center’
  • ‘center-start’
  • ‘center-end’
  • ‘bottom’
  • ‘bottom-start’
  • ‘bottom-end’
alertConfirmation() {
    Swal.fire({
        position: 'top-start',
        title: 'Buy Product X',
        text: 'This product is invincible.',
        icon: 'warning',
        showCancelButton: true,
    })
}

Add Custom Animation in Popup Box

You can add the custom animation using the Animate CSS, simply define the hideClass, showClass properties simultaneously, and define the animation name with popup property.

simpleAlertBox() {
    Swal.fire({
        title: 'Add Custom Animation in Popup Box',
        showClass: {
            popup: 'animate__animated animate__zoomInUp'
        },
        hideClass: {
            popup: 'animate__animated animate__zoomInDown'
        }
    })
}

Test Angular Alert Box

Next, start the app by executing the given command:

ng serve

Open the following URL for testing the app:

http://localhost:4200/

Conclusion

The SweetAlert2 offers smooth integration of alert boxes in angular. You get innumerable features that enhance the customization to a certain extent.

As you can see this tutorial also showed you the proper methods to add animation, changing the popup boxes position for Success, Alert, Warning and Info alert boxes.