Angular 14 sweetalert example. In this tutorial, we will learn how to use sweetalert or sweetalert2 in angular 14 app for displaying sweet alert pop up message.
Angular 14 Sweetalert2 Example
Just follow the following steps and implement sweetalert in agnular apps:
- Step 1 – Create New Angular App
- Step 2 – Install Sweetalert NPM Packages
- Step 3 – Implement Sweetalert on View File
- Step 4 – Add Code On Component ts File
- Step 5 – Start Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Sweetalert Npm Packages
In this step, you need to install sweetalert2 npm package for sweetalert beautiful alert in angular. so let’s run both command:
npm install --save sweetalert2
Then, add css file on angular.json file as like following:
angular.json
....
"styles": [
"src/styles.css",
"node_modules/sweetalert2/src/sweetalert2.scss"
],
....
Step 3 – Implement Sweetalert on View File
In this step, create simple three buttons for displaying sweert alert message like success, error, warning and alert messsages So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 14 Sweetalert2 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 – Add Code On Component ts File
In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component, OnInit } from '@angular/core';
import Swal from 'sweetalert2/dist/sweetalert2.js';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';
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
In this step, execute the following commands on terminal to start angular app:
ng serve php -S localhost:8001
Recommended Angular Tutorials
