How To Use SweetAlert In Angular

Introduction:

In this article we will learn how to use SweetAlert in Angular. SweetAlert is use to display messages.

Create a Project:

First, open visual studio code & create a new project by typing below command in terminal.

ng new sweetAlertDemo

Install Packages:

Install bootstrap & sweetAlert step by step by using following command.

Install bootstrap:

npm install bootstrap --save

Install SweetAlert:

npm install sweetalert2

Now open the style.css file and add bootstrap file reference:

@import '~bootstrap/dist/css/bootstrap.min.css';

After that open the index.html file and add following line to it:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Add below code to app.component.html file.

<div class="row">  
    <div class="col-sm-12 btn btn-primary">  
      Angular Sweetalert Demo  
    </div>  
  </div>  
  <div style="padding: 5px;margin: 5px;">  
    <button class="btn btn-info" style="margin-right: 10px;margin-left: 10px;"(click)="simpleAlert()">Simple Alert</button>  
    <button class="btn btn-success" style="margin-right: 10px;margin-left: 10px;" (click)="alertWithSuccess()">Alert with Success</button>  
    <button class="btn btn-primary" style="margin-right: 10px;margin-left: 10px;" (click)="confirmBox()">Confirm Box</button>  
    <button class="btn btn-danger" style="margin-right: 10px;margin-left: 10px;" (click)="erroalert()">Error Alert</button>  
    <button class="btn btn-warning" style="margin-right: 10px;margin-left: 10px;" (click)="topend()">Top End</button>  
  </div>

Copy following code and paste to app.component.ts file.

import { Component } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sweetalert';
  ngOnInit() {

  }

  simpleAlert() {
    Swal.fire('Hello Angular');
  }

  alertWithSuccess() {
    Swal.fire('Thank you...', 'You submitted succesfully!', 'success')
  }
  erroalert() {
    Swal.fire({
      icon: 'error',
      title: 'Oops...',
      text: 'Something went wrong!',
      footer: '<a href>Why do I have this issue?</a>'
    })
  }
  topend() {
    Swal.fire({
      position: 'top-end',
      icon: 'success',
      title: 'Your work has been saved',
      showConfirmButton: false,
      timer: 1500
    })
  }
  confirmBox() {
    Swal.fire({
      title: 'Are you sure want to delete?',
      text: 'You will not be able to recover this file!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it'
    }).then((result) => {
      if (result.value) {
        Swal.fire(
          'Deleted!',
          'Your imaginary file has been deleted.',
          'success'
        )
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire(
          'Cancelled',
          'Your imaginary file is safe :)',
          'error'
        )
      }
    })
  }
}

Output: