Hello to all, welcome again on therichpost.com. In this post, I will tell you, Angular 8 Sweetalert working example.
Post Working:
In this post, I am showing sweetalert in Angular 8.
Here is the working code snippet and please follow carefully:
1. Very first, here are common basics steps to add angular 8 application on your machine:
$ npm install -g @angular/cli $ ng new angularsweetalert // Set Angular8 Application on your pc cd angularsweetalert // Go inside project folder ng serve // Run project http://localhost:4200/ //Check working Local server
2. Now run below command into your terminal to include sweetalert package into your angular 8 application:
npm install --save sweetalert2
3. Now add below code into your angular.json file:
"styles": [ ... "node_modules/sweetalert2/src/sweetalert2.scss" ], "scripts": [ ... "node_modules/sweetalert2/dist/sweetalert2.js" ]
4. Finally add, below code into your app.component.ts file:
import Swal from 'sweetalert2/dist/sweetalert2.js';
export class AppComponent implements OnInit {
...
opensweetalert()
{
Swal.fire({
text: 'Hello!',
icon: 'success'
});
}
opensweetalertdng()
{
Swal.fire('Oops...', 'Something went wrong!', 'error')
}
opensweetalertcst(){
Swal.fire({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary 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'
)
// For more information about handling dismissals please visit
// https://sweetalert2.github.io/#handling-dismissals
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
}
...
}
5. Add below code into app.component.html file:
<button class="btn btn-primary mr-2" (click)="opensweetalert()">Open Sweetalert Success</button> <button class="btn btn-danger mr-2" (click)="opensweetalertdng()">Open Sweetalert Danger</button> <button class="btn btn-warning mr-2" (click)="opensweetalertcst()">Open Sweetalert Custom Buttons</button>
This is it and if you have any kind of query then please let me know.
Jas
Thank you
Leave a Reply
You must be logged in to post a comment.