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?

Read Also:  Bootstrap modal load content dynamically

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.

Read Also:  Laravel 6 Define Global Constants Config PHP file

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to display image from storage path using route in Laravel?
  2. Read Also:  PHP MYSQLi datetime format insert into mysql
  3. Read Also:  Bootstrap On-Off Toggle Switch jQuery Plugins
  4. Read Also:  Image Upload in Laravel 7 Example Tutorial
  5. Read Also:  Where is the correct place to insert a JavaScript in HTML?
  6. Read Also:  Error incorrect format parameter phpmyadmin
  7. Read Also:  Get all checked Checkbox Values using VueJS
  8. Read Also:  how to get current latitude and longitude in php?
  9. Read Also:  Bootstrap On-Off Toggle Switch jQuery Plugins
  10. Read Also:  Error incorrect format parameter phpmyadmin
CLOSEX