Today, We want to share with you alert message in angularjs.In this post we will show you angularjs alerts, hear for angularjs notification popup we will give you demo and example for implement.In this post, we will learn about Angular 6 Toast Message Notifications From Scratch with an example.
Angularjs Show JavaScript Alert Message (Box) on ng-click with Example
AngularJS alert component as service
Alerts and confirm boxes are an important part of any web application. In this tutorial, we will see How to get a alert message on click of a element in angularjs?
Implementaion
INDEX.HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert/lib/sweet-alert.css">
</head>
<body>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-sweetalert/SweetAlert.min.js"></script>
<script src="node_modules/sweetalert/lib/sweet-alert.min.js"></script>
<script src="app.js"></script>
</body>
</html>
APP.JS
angular.module('LoginApplication', ['oitozero.ngSweetAlert'])
.controller('LoginController',['SweetAlert', function(SweetAlert){
var vm = this;
vm.alert = function(){
//here alert some step by setp logic implementation here
}
vm.confirm = function(){
//confirm more implementation here => logic
}
}]);
SIMPLE ALERT
vm.alert = function(){
SweetAlert.swal("Good Luck Welcome to Tamilrokers new link 2021"); //simple alert
}
SIMPLE ALERT Example
vm.confirm = function(){
SweetAlert.swal({
title: "Are you delete this product?",
text: "Tap Delete Google services. You might need to sign in. Next to the product you want to remove, tap Remove Remove .",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3d3d3d",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
closeOnCancel: false
},
function(checkVerify){
if(checkVerify){
SweetAlert.swal("Good Luck Deleted!");
} else {
SweetAlert.swal("Your Product is safe!");
}
});
final app.js
angular.module('LoginApplication', ['oitozero.ngSweetAlert'])
.controller('LoginController',['SweetAlert', function(SweetAlert){
var vm = this;
vm.alert = function(){
SweetAlert.swal("I'm a Mess - Bebe Rexha song"); //simple alert
}
vm.confirm = function(){
SweetAlert.swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3f3d3d",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false,
closeOnCancel: false
},
function(checkVerify){
if(checkVerify){
SweetAlert.swal("Good Luck Deleted!");
} else {
SweetAlert.swal("Your product is safe!");
}
});
}
}]);
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert/lib/sweet-alert.css">
</head>
<body>
<div ng-controller="LoginController as demo">
<p>
<h2>Simple Alert Box with Message - - www.pakainfo.com</h2>
<button ng-click="demo.alert()">click</button>
<h2>Simple Angular Confirm Example - www.pakainfo.com</h2>
<button ng-click="demo.confirm()">click</button>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-sweetalert/SweetAlert.min.js"></script>
<script src="node_modules/sweetalert/lib/sweet-alert.min.js"></script>
<script src="app.js"></script>
</body>
</html>
I hope you get an idea about Displaying alert messages with AngularJS.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.