Learn how to display a popup notification or alert notification using sweetalert2 in Angular application with full embedded code.

In this article, we’ll learn how to display a popup notification(alert notification) using sweetalert2 in Angular application. Let’s create a new project to display the popup notification for that you need to run the following command to create a project.

ng new sweetalert-demo

“sweetalert-demo” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd sweetalert-demo”. To Run angular applications, it required to run “ng serve”.

After that, we need to install the sweetalert2 npm package in our application. run below command to install.

npm i sweetalert2

Then we need to add CSS of the sweetalert2 in the angular.json file display in the below screen.

...........
"styles": [

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

Now we can use sweetalert2 notification in our component using import statement display in below code.

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

Let’s register SweetAlert in App Component to display the popup notification. We create functions for display poup. below is the list of functions we created.

1. simpleNotification() – it display simple popup message.

2. successNotification() – it display success message with success icon.

3. errorNotification() – it display error message with erro icon.

4. alertConfirmation() – It display confiramtion popup with 2 option 1 for success 2 for cancel.

5. emailNotification() – Email input in popup.

Component File

import { Component, VERSION } from '@angular/core';
import Swal from 'sweetalert2/dist/sweetalert2.js';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;

   simpleNotification(){
    Swal.fire('Simple Notification');
  }

  successNotification(){
    Swal.fire('Hi', 'We have been informed!', 'success')
  }

   errorNotification(){
    Swal.fire('Hi', 'We have been informed!', 'error')
  }

  alertConfirmation(){
    Swal.fire({
      position: 'top-end',
      title: 'Are you sure?',
      text: 'This process is irreversible.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, go ahead.',
      cancelButtonText: 'No, let me think'
    }).then((result) => {
      if (result.value) {
        Swal.fire(
          'Removed!',
          'Item removed successfully.',
          'success'
        )
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire(
          'Cancelled',
          'Item is safe.)',
          'error'
        )
      }
    })
  }

  async emailNotification(){
    const { value: email } = await Swal.fire({
        position: 'bottom-end',
        title: 'Input email address',
        input: 'email',
        inputPlaceholder: 'Enter your email address'
      })

      if (email) {
        Swal.fire(`Entered email: ${email}`)
      }
  }  
}

#angular #javascript #web-development #programming #developer