Popup Notification Using SweetAlert2 in Angular

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

HTML file “app.component.html” Replace below code.


<h1 style="text-align:center">SweetAlert2 Demo</h1><br>
<div class="alert alert-primary m-b-2" role="alert">
  <h2>Simple notification</h2>
  <button class="btn btn-primary" (click)="simpleNotification()">Simple Notification</button>
</div>


<div class="alert alert-success m-b-2" role="alert">
  <h2>Sucess Notification</h2>
  <button class="btn btn-success" (click)="successNotification()">Sucess Notification</button>
</div>

<div class="alert alert-danger m-b-2" role="alert">
  <h2>Error Notification</h2>
  <button class="btn btn-danger" (click)="errorNotification()">Error Notification</button>
</div>

<div class="alert alert-dark m-b-2" role="alert">
  <h2>Input Email Notification</h2>
  <button class="btn btn-dark" (click)="emailNotification()">Input Email Notification</button>
</div>


<div class="alert alert-info m-b-2" role="alert">
  <h2>Confirmation Notification</h2>
  <button class="btn btn-info" (click)="alertConfirmation()">Confirmation Notification</button>
</div>



Output

Below is the full embeded code for the sweetalert2 popup. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 1
  • 2
  •  
  •