Angular 17 SweetAlert2 – Popup Notification Example

To use SweetAlert2 in Angular 17; Simply install SweetAlert by running ABC command on CMD and then use SweetAlert 2 methods to show or display beautiful, responsive, customizable, accessible replacement popup boxes in Angular applications.

Angular 17 Sweetalert2 Example Tutorial

Steps to install, set up, and use SweetAlert 2 in agnular 17 projects using npm sweetalert2:

Step 1: Set Up the Angular Project

Simply run the ng new my-new-app command on cmd or terminal to create a new latest angular version application using the Angular CLI:

ng new my-new-app

Step 2 – Install SweetAlert2

To install sweetalert2 in your angular project, you need to run a cmd or terminal window on npm install --save sweetalert2 command:

npm install --save sweetalert2

Now you have to configure the CSS file of SweetAlert, which you can use the CSS of SweetAlert2 in angular project, for this you have to open the angular.json file, and you have to add something like this:

angular.json

....

"styles": [

      "src/styles.css",

      "node_modules/sweetalert2/src/sweetalert2.scss"

    ],

....

Step 3 – Use Sweetalert2 in HMTL Tamplate

Simply open app.component.html or any other component file, where you want to use sweetalert2 popup message and use it’s popup boxes like following into your html file:

<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 – Intialize SweetAlert2 Popups in Your Component

Simply open app.component.ts or any other component typescript file, where you want to intialize sweetalert2 popup message and use it like following into your typscript 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

Type ng serve command on terminal or 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 install, setup, and use SweetAlert2 with the latest version of Angular 17 projects.

Recommended Angular Tutorials