Sweetalert Angular 8 - Javascript

Introduction

Sweetalert is a javascript library that allows you to create beautiful and customizable alert dialogs. It is easy to use, lightweight, and comes with a wide range of customization options. Sweetalert has become incredibly popular among developers, and the Angular community is no exception. With the Sweetalert Angular 8 library, you can easily integrate Sweetalert into your Angular 8 project.

Installation

To use Sweetalert Angular 8, you need to install it using npm. Here's how you can do it:

npm install sweetalert2 ngx-sweetalert2 --save

Usage

Once installed, you need to import the Sweetalert module into your Angular 8 project. You can do this by adding the following line to your app.module.ts file:

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

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

Next, you can use Sweetalert in your Angular 8 project with ease. Here's an example:

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

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="showAlert()">Show Alert</button>
  `,
})
export class MyComponent {
  showAlert() {
    Swal.fire('Hello world!');
  }
}

This will display a simple alert dialog with the text "Hello world!".

Customization

One of the great things about Sweetalert is that it is highly customizable. You can add buttons, input fields, icons, animations, and much more. Sweetalert Angular 8 makes it easy to customize your alerts using a simple API. Here's an example:

Swal.fire({
  title: 'Are you sure?',
  text: 'You will not be able to undo this!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
  } else if (result.isDismissed && result.dismiss === Swal.DismissReason.cancel) {
    Swal.fire('Cancelled', 'Your imaginary file is safe :)', 'error');
  }
});

This example shows a more complex dialog that has a warning icon, a confirmation button, and a cancel button. When the confirmation button is clicked, the alert will display a success message. When the cancel button is clicked, the alert will display an error message.

Conclusion

Sweetalert Angular 8 is a powerful and easy-to-use library that allows you to create beautiful and customizable alert dialogs in your Angular 8 project. With its wide range of customization options, you can create alerts that suit your project's needs. If you're looking for an alert library for your Angular 8 project, Sweetalert Angular 8 is definitely worth checking out.