Posted inAngularJS / JavaScript / jQuery / Programming / Technology

Alert Toast message in Angularjs Component

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


    
        
    
    
        
        
        
        
    

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


    
        
    
    
        

Simple Alert Box with Message - - www.pakainfo.com

Simple Angular Confirm Example - www.pakainfo.com

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype