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:  ng-app Directive with Name using Angular Example

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:  MySQL MULTIPLE INNER JOINS Example

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP upload custom file in ckeditor Example
  2. Read Also:  PHP Laravel CURL HTTP GET POST Request
  3. Read Also:  jQuery Display Image Based on Image URL with Example
  4. Read Also:  Remove Last Character from String in JavaScript
  5. Read Also:  Data auto Load While scrolling page down with jquery PHP and MySQL
  6. Read Also:  Show-Hide Password in TextBox with Button using jQuery
  7. Read Also:  Upload Multiple Images Preview using PHP
  8. Read Also:  angular 6 crud example - crud operation in angular 6
  9. Read Also:  MySQL MULTIPLE INNER JOINS Example
  10. Read Also:  ng-app Directive with Name using Angular Example