Angular 14 – SweetAlert2 for Creating Custom Alerts, Confirm and Notification

Creating alerts, confirm, and notification message boxes can enhance the user experience in your Angular application by providing clear and concise information to the user. In this tutorial, we will learn how to create these message boxes using SweetAlert2 Angular, a popular and easy-to-use library for creating custom alert, confirm, and notification messages.

To follow along with this tutorial, you will need the following:

• A basic understanding of Angular
• Familiarity with JavaScript and TypeScript
• A code editor (Visual Studio Code is recommended)

Installation

To install SweetAlert2 Angular, open your terminal and run the following command:

npm install sweetalert2-ngx-modal

Once the installation is complete, you will need to import the SweetAlert2Module and the SweetAlert2Service in the src/app/app.module.ts file:

import { SweetAlert2Module } from 'sweetalert2-ngx-modal';

@NgModule({
  imports: [
    SweetAlert2Module.forRoot(),
  ],
  ...
})
export class AppModule { }

Creating an Alert

To create an alert in your application, you will need to import the SweetAlert2Service in your component and call the alert() method. The alert() method takes an object as a parameter that contains the properties of the alert, such as the title, text, and type.

import { SweetAlert2Service } from 'sweetalert2-ngx-modal';

export class AppComponent {
  constructor(private sweetAlert2Service: SweetAlert2Service) { }

  showAlert() {
    this.sweetAlert2Service.alert({
      title: 'Success',
      text: 'Your message has been sent!',
      type: 'success'
    });
  }
}

In this example, we are creating an alert with the title “Success”, the text “Your message has been sent!” and the type “success”. You can also customize the alert by adding buttons, setting the timer and styling the alert. The full documentation of the options and methods can be found in the official documentation of SweetAlert2 (https://sweetalert2.github.io/)

Creating a Confirm

To create a confirm box in your application, you will need to call the confirm() method on the SweetAlert2Service. The confirm() method takes an object as a parameter that contains the properties of the confirm box, such as the title, text, and type.

import { SweetAlert2Service } from 'sweetalert2-ngx-modal';

export class AppComponent {
  constructor(private sweetAlert2Service: SweetAlert2Service) { }

  showConfirm() {
    this.sweetAlert2Service.confirm({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it'
    }).then((result) => {
      if (result.value) {
        // user confirmed, do something like delete file
        console.log("File deleted");
      } else if (result.dismiss === 'cancel') {
        console.log("File not deleted");
      }
    });
  }
}

As you can see in the above example, the confirm() method returns a promise that resolves to an object containing the value and dismiss properties. The value property is a boolean that indicates whether the confirm button was clicked (true) or the cancel button was clicked (false). You can use this property to determine the next step in your application’s logic, such as deleting a file or cancelling an action.

Creating a Notification

To create a notification in your application, you will need to call the notification() method on the SweetAlert2Service. The notification() method takes an object as a parameter that contains the properties of the notification, such as the title, text, and type.

import { SweetAlert2Service } from 'sweetalert2-ngx-modal';

export class AppComponent {
  constructor(private sweetAlert2Service: SweetAlert2Service) { }

  showNotification() {
    this.sweetAlert2Service.notification({
      title: 'Notification Title',
      text: 'This is a notification message',
      type: 'info'
    });
  }
}

In this example, we are creating a notification with the title “Notification Title”, the text “This is a notification message” and the type “info”. You can also customize the notification by adding buttons, setting the timer and styling the notification.

Conclusion

In this tutorial, we have learned how to create alerts, confirm, and notification message boxes in an Angular application using SweetAlert2 Angular. This library provides a simple and easy-to-use interface for creating custom alerts, confirm and notifications with various options and customization. You can use these message boxes to provide clear and concise information to the user, improve the user experience and make your application more interactive.