Sweetalert2 in Angular 16

SweetAlert2 provides a more user-friendly and aesthetically pleasing way to display alerts, prompts, and confirmations in your Angular applications.

Sweetalert 2 in angular 16; In this tutorial, you will learn how to install, integrate and use sweetalert2 in angular 16 projects for displaying sweet alert pop-up messages using npm sweetalert2.

Angular 16 Sweetalert2 Example Tutorial

Steps to install, integrate and use sweetalert2 in agnular projects using npm sweetalert2:

• Step 1: Set Up the Angular Project
• Step 2 – Install SweetAlert2
• Step 3 – Implement Sweetalert2 in HMTL Tamplate
• Step 4 – Use SweetAlert2 in Your Component
• Step 5 – Start Angular App

Step 1: Set Up the Angular Project

First of all, open your command prompt or cmd and execute the following command on it to install and create a new one using the Angular CLI:

ng new my-new-app

Step 2 – Install SweetAlert2

Next, you need to install the sweetalert2 npm package for sweetalert beautiful alert in angular projects, so open command prompt and execute the following command into it:

npm install --save sweetalert2

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

angular.json

....

"styles": [

      "src/styles.css",

      "node_modules/sweetalert2/src/sweetalert2.scss"

    ],

....

Step 3 – Implement Sweetalert2 in HMTL Tamplate

Next, you need to ple three buttons to display sweert alert messages like success, error, warning and alert messages. So, Open the app.component.html file (located in the src/app/ folder) and add the following code:

<h1>Angular 17 Sweetalert 2 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 – Use SweetAlert2 in Your Component

Now, let’s use SweetAlert2 to display a basic alert when a button is clicked.

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

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



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-angular-app';

  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 command on cmd to start the angular project:

ng serve

Open your browser and navigate to http://localhost:4200/ to see the application running. Click the “alertWithSuccess, simple alert and confirm box” button, and you should see a SweetAlert2 alert messages.

Conclusion

Congratulations! You have successfully integrated SweetAlert2 with the latest version of Angular 16 projects.

Recommended Angular Tutorials