Sweet Alerts in Angular

In this article, we will figure out how to utilize sweetalerts in the Angular 11 application.  Sweetalert is used to display an alert message.

Using sweet alert your website is looking good. This tutorial explains to you step by step how to show an alert or popup notice in Angular 11 with Sweet Alert

Step 1:-

Create an angular application using following command

ng new sweet-alert
cd sweet-alert

Step 2:-

Add the following package to your application

npm i sweetalert2

Step 3:-

Add below code in your app. component.ts file

import { Component, OnInit } from '@angular/core';
import Swal from 'sweetalert2';
@Component({
   selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent{
  sweetAlert() {
    Swal.fire({
      title: 'Are you sure want to remove?',
      text: 'You can not recuperate this document!!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it'
    }).then((response: any) => {
      if (response.value) {
        Swal.fire(
          'Deleted!',
          'Your imaginary file has been deleted.',
          'success'
        )
      } else if (response.dismiss === Swal.DismissReason.cancel) {
        Swal.fire(
          'Cancelled',
          'Your imaginary file is safe',
          'error'
        )
      }
    })
  }
}

Step 4:-

Add below code in your app.component.html file

<h2 style="padding: 4px;">Hello Everyone</h2>
<h4 style="padding: 10px;">
    <button class="btn btn-primary" (click)="sweetAlert()">Sweet Alert
    </button>
</h4>

Step 5:-

Run Your Application

npm start

Output:-