Create Alert with Timeout using Angular JS

Submitted by nurhodelta_17 on Sunday, January 14, 2018 - 21:09.

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.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Create Alert with Timeout</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <style type="text/css">
        .bottom-left{
                        display:block;
                        position:absolute;
                        bottom:50px;
                        left:50px;
                }
    </style>
</head>
<body ng-controller="myController">
<div class="container">
    <h1 class="page-header text-center">AngularJS Create Alert with Timeout</h1>
    <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <div class="panel panel-default">
                        <div class="panel-body">
                                <form name="myForm" ng-submit="submitForm()">
                                        <div class="form-group">
                                                <label>Firstname:</label>
                                                <input type="text" class="form-control" ng-model="user.firstname" required>
                                        </div>
                                        <div class="form-group">
                                                <label>Lastname:</label>
                                                <input type="text" class="form-control" ng-model="user.lastname" required>
                                        </div>
                                        <div class="form-group">
                                                <label>Address:</label>
                                                <input type="text" class="form-control" ng-model="user.address" required>
                                        </div>
                                        <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
                                        </form>
                        </div>
                        </div>          
                </div>
        </div>
</div>
<div class="alert alert-success text-center bottom-left" ng-show="success">
        <button type="button" class="close" ng-click="closeAlert()">&times;</button>
        <span class="glyphicon glyphicon-check"></span> {{ message }}
</div>
<script src="angular.js"></script>
</body>
</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.

var app = angular.module('app', []);
app.controller('myController', function($scope, $timeout){
    $scope.success = false;
 
    $scope.submitForm = function(){
        //if you want to send request you can do it here
        //then do this on success request
        $scope.success = true;
        $scope.message = 'User added successfully'; //->put whatever message you want
        
        //after 5 sec call to close the alert
        $timeout( function(){
            $scope.closeAlert();
        }, 5000 );
    }
 
    $scope.closeAlert = function(){
        $scope.success = false;
    }
});

That ends this tutorial. Happy Coding :)

Add new comment

292 views