Create Alert with Timeout using Angular JS

Getting Started

I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.

index.html>

This is our index which contains our form that upon submit, an alert will popup.
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <meta charset="utf-8">
  4. <title>AngularJS Create Alert with Timeout</title>
  5. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  7. <style type="text/css">
  8. .bottom-left{
  9. display:block;
  10. position:absolute;
  11. bottom:50px;
  12. left:50px;
  13. }
  14. </style>
  15. </head>
  16. <body ng-controller="myController">
  17. <div class="container">
  18. <h1 class="page-header text-center">AngularJS Create Alert with Timeout</h1>
  19. <div class="row">
  20. <div class="col-sm-4 col-sm-offset-4">
  21. <div class="panel panel-default">
  22. <div class="panel-body">
  23. <form name="myForm" ng-submit="submitForm()">
  24. <div class="form-group">
  25. <label>Firstname:</label>
  26. <input type="text" class="form-control" ng-model="user.firstname" required>
  27. </div>
  28. <div class="form-group">
  29. <label>Lastname:</label>
  30. <input type="text" class="form-control" ng-model="user.lastname" required>
  31. </div>
  32. <div class="form-group">
  33. <label>Address:</label>
  34. <input type="text" class="form-control" ng-model="user.address" required>
  35. </div>
  36. <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
  37. </form>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="alert alert-success text-center bottom-left" ng-show="success">
  44. <button type="button" class="close" ng-click="closeAlert()">&times;</button>
  45. <span class="glyphicon glyphicon-check"></span> {{ message }}
  46. </div>
  47. <script src="angular.js"></script>
  48. </body>
  49. </html>

angular.js

This contains our angular.js script wherein upon showing our alert, using $timeout, we have set to close the alert after 5 secs.
  1. var app = angular.module('app', []);
  2. app.controller('myController', function($scope, $timeout){
  3. $scope.success = false;
  4.  
  5. $scope.submitForm = function(){
  6. //if you want to send request you can do it here
  7. //then do this on success request
  8. $scope.success = true;
  9. $scope.message = 'User added successfully'; //->put whatever message you want
  10.  
  11. //after 5 sec call to close the alert
  12. $timeout( function(){
  13. $scope.closeAlert();
  14. }, 5000 );
  15. }
  16.  
  17. $scope.closeAlert = function(){
  18. $scope.success = false;
  19. }
  20. });
That ends this tutorial. Happy Coding :)

Add new comment