This write-up describes how to implement sweet alerts in the Angular application. The article will explain from the project creation to sweet alert implementation in detail.

The very first step is to create an Angular project.

Step 1- Create Project

Run the following command to install the latest version of Angular CLI.

npm install -g @angular/cli@latest

Run below command to create new project

ng new AngularAppwithSweetAlertDemo

Then, run below command and go to your project directory.

cd AngularAppwithSweetAlertDemo

Step 2- Install SweetAlert2

Run below command to Install SweetAlert2 in your project.

npm install sweetalert2

Open your Project and go to angular.json file. Then copy and paste the below line of code there.

"styles": [


Your angular.json file will look like below.

Step 3- Register SweetAlert in App component

Copy and paste the below code in app.component.ts file. Here, you can see the sample implementation of Sweet alert for Success, Confirmation Alert, and Tiny Alert

import { Component } from '@angular/core';
import Swal from 'sweetalert2/dist/sweetalert2.js';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
export class AppComponent {
title = 'DemoWebApp';
ngOnInit() {
console.log('Life Cyle Hook with spontaneous response.');
tinyAlert() {'Hey there!');
successNotification() {'Hi', 'We have been informed!', 'success')
alertConfirmation() {{
title: 'Are you sure?',
text: 'This process is irreversible.',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, go ahead.',
cancelButtonText: 'No, let me think'
}).then((result) => {
if (result.value) {
'Product removed successfully.',
} else if (result.dismiss === Swal.DismissReason.cancel) {
'Product still in our database.)',

Step 4- Implementation

Open the corresponding component.ts for which you need to implement the sweet alert. In the click event of your component.ts class write the below code to implement a sweet alert.

For Success:'Successful', 'Full Node Connection successful', 'info');

For Error:'Oops…', 'Something went wrong!, Please contact your administrator', 'error');

Sample example of componet.ts code

SaveItem() {   
    this.itemService.SaveItem(this.item).subscribe((response: any) => {     
      if (response.outputs) {
        this.items = response.outputs;'Successful', 'Item saved successfully', 'info');
      } else {'Oops...', 'Something went wrong!, Please contact your administrator', 'error');
        (error: any) => {

sample html page example

<button (click)="SaveItem()">Save Item</button>


In this way, you can implement SweetAlert2 in your angular application. I hope, this helps you to understand and use the alert messages in your applocation to provide a meaningful message to the user.

Leave a Reply

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