Angular 8 Sweetalert working example

Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 Sweetalert working example.

Post Working:

In this post, I am showing sweetalert in Angular 8.

Here is the working code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 8 application on your machine:

$ npm install -g @angular/cli

$ ng new angularsweetalert // Set Angular8 Application on your pc

cd angularsweetalert // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server

2. Now run below command into your terminal to include sweetalert package into your angular 8 application:

npm install --save sweetalert2

3. Now add below code into your angular.json file:

"styles": [
  ...
  "node_modules/sweetalert2/src/sweetalert2.scss"
  
],
"scripts": [
  ...
   "node_modules/sweetalert2/dist/sweetalert2.js"
  
  
]

4. Finally add, below code into your app.component.ts file:

import Swal from 'sweetalert2/dist/sweetalert2.js';
export class AppComponent implements OnInit {

...
opensweetalert()
  {
    Swal.fire({
        text: 'Hello!',
        icon: 'success'
      });
  }
  opensweetalertdng()
  {
   Swal.fire('Oops...', 'Something went wrong!', 'error')
  }
  
  opensweetalertcst(){
    Swal.fire({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary 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'
      )
      // For more information about handling dismissals please visit
      // https://sweetalert2.github.io/#handling-dismissals
      } else if (result.dismiss === Swal.DismissReason.cancel) {
      Swal.fire(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
      )
      }
    })
  }
...
}

5. Add below code into app.component.html file:

<button class="btn btn-primary mr-2" (click)="opensweetalert()">Open Sweetalert Success</button>
 <button class="btn btn-danger  mr-2" (click)="opensweetalertdng()">Open Sweetalert Danger</button>
 <button class="btn btn-warning mr-2" (click)="opensweetalertcst()">Open Sweetalert Custom Buttons</button>

This is it and if you have any kind of query then please let me know.

Jas

Thank you