Saturday, April 20, 2024
Angular 8Angular 9Sweetalert

Angular 8 Sweetalert working example

Angular 8 Sweetalert working example

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

Post Working:

In this post, I am showing sweetalert in Angular 8.
Nodejs - Fullcalendar Working Example
Angular 8 Sweetalert working example

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": [
"scripts": [




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

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

        text: 'Hello!',
        icon: 'success'
  {'Oops...', 'Something went wrong!', 'error')
      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) {
        'Your imaginary file has been deleted.',
      // For more information about handling dismissals please visit
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        'Your imaginary file is safe :)',


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.


Thank you

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.