Angular 12/11 Sweetalert2 Tutorial Example

Angular 12/11 Sweetalert2 Tutorial Example

Angular 11/12 sweetalert example. In this tutorial, you will learn how to use sweetalert or sweetalert2 in angular 11/12 app for displaying sweetalert msg.

In this example, we will use angular sweetalert npm package for displaying sweetalert message like success message, error message, warning message etc in angular 11/12 app.

Sweetalert In Angular 12/11 App

Just follow the following steps and implement sweetalert in agnular 11/12 app:

  • Step 1 – Create New Angular App
  • Step 2 – Install Npm Packages
  • Step 3 – Add Code on View File
  • Step 4 – Add Code On Component ts File
  • Step 5 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Npm Packages

In this step, you need to install sweetalert2 npm package for sweetalert beautiful alert in angular. so let’s run both command:

npm install --save sweetalert2

Then, add css file on angular.json file as like following:

angular.json

....

"styles": [

      "src/styles.css",

      "node_modules/sweetalert2/src/sweetalert2.scss"

    ],

....

Step 3 – Add Code on View File

In this step, create simple three buttons for displaying sweert alert message like success, error, warning and alert messsages So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 Sweetalert2 Examples - Tutsmake.com</h1>
  
<button (click)="simpleAlert()">Simple Alert</button>
<button (click)="alertWithSuccess()">Alert with Success</button>
<button (click)="confirmBox()">Confirm Box</button>

Step 4 – Add Code On Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component, OnInit } 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 implements OnInit {
  name = 'Angular';
  
  ngOnInit(){
    console.log('This is init method');
  }
  
  simpleAlert(){
    Swal.fire('Hello world!');
  }
  
  alertWithSuccess(){
    Swal.fire('Thank you...', 'You submitted succesfully!', 'success')
  }
  
  confirmBox(){
    Swal.fire({
      title: 'Are you sure want to remove?',
      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'
        )
      }
    })
  }
}

Step 5 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

php -S localhost:8001

Recommended Angular Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *