How To Use Sweetalert In Angular 10

Introduction

In this article, we will learn how to use sweetalert2 in Angular 10 applications. Sweetalert2 is used to display alert messages.

Prerequisites

Create an Angular project by using the following command.

Open this project in Visual Studio Code and install Bootstrap by using the following command.

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

Now install sweetalert2 by using the following command.

Now open index.html file and add the folloiwng line.

Now create a new component by using the following command.

Now open Alertmsg.component.html file and add the following code,

<div class="row">
<div class="col-sm-12 btn btn-primary">
Angular Sweetalert Demo
</div>
</div>
<div style="padding: 5px;margin: 5px;">
<button class="btn btn-info" style="margin-right: 10px;margin-left: 10px;"(click)="simpleAlert()">Simple Alert</button>
<button class="btn btn-success" style="margin-right: 10px;margin-left: 10px;" (click)="alertWithSuccess()">Alert with Success</button>
<button class="btn btn-primary" style="margin-right: 10px;margin-left: 10px;" (click)="confirmBox()">Confirm Box</button>
<button class="btn btn-danger" style="margin-right: 10px;margin-left: 10px;" (click)="erroalert()">Error Alert</button>
<button class="btn btn-warning" style="margin-right: 10px;margin-left: 10px;" (click)="topend()">Top End</button>
</div>

Now open Alertmsg.component.tsfile and add the following code,

Open app.moudle.ts file and add the following code:

Now open app.component.html file and add the following code,

Now run the project by using the following command: 'npm start'

Now click on the given button and check alert message.

Simple Alert message

Confirm message

In this article, we learned how to add sweetalert2 in Angular 10 applications.