angularjs make a simple countdown

Question

I would like make a countDown with Angular js. this is my code:

Html File

<div ng-app ng-controller = "countController"> {{countDown}} <div>

js File

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){$scope.countDown--; console.log($scope.countDown)},1000);  
}

in console.log it works I have a countdown but in {{countdown}} refresh it doesn't could you help me please? thanks!

Even easier, a pre-built directive: http://siddii.github.io/angular-timer/ — Brett, Mar 12 '14 at 04:33

score 60 · Answer 1 · edited Mar 11 '14 at 23:27

60

Please take a look at this example here. It is a simple example of a count up! Which I think you could easily modify to create a count down.

http://jsfiddle.net/ganarajpr/LQGE2/

JavaScript code:

function AlbumCtrl($scope,$timeout) {
    $scope.counter = 0;
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);

    $scope.stop = function(){
        $timeout.cancel(mytimeout);
    }
}

HTML markup:

<!doctype html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>
    <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
</head>
<body>
<div ng-controller="AlbumCtrl">
    {{counter}}
    <button ng-click="stop()">Stop</button>    
</div>
</body>
</html>

edited Mar 11 '14 at 23:27

acdcjunior

132,397
37
331
304

answered Aug 21 '12 at 07:55

ganaraj

26,841
6
63
59

7

Here is a modification that does a count down: http://jsfiddle.net/dpeaep/LQGE2/1/ – Daniel Aug 21 '12 at 15:03
2

good, I used [$interval](https://docs.angularjs.org/api/ng/service/$interval) instead of $timeout – Andres Oct 14 '14 at 18:23
How would you stop the clock? – CodyBugstein Jun 07 '15 at 05:47
Agree with @Andres - I feel $interval is the way to go. [This is the answer](http://stackoverflow.com/a/33508091/4463445) I eventually used for an angularjs timer implementation. – jaycer Dec 20 '16 at 14:50

score 25 · Answer 2 · edited Sep 23 '16 at 14:11

As of version 1.3 there's a service in module ng: $interval

function countController($scope, $interval){
    $scope.countDown = 10;    
    $interval(function(){console.log($scope.countDown--)},1000,0);
}

Use with caution:

Note: Intervals created by this service must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment. See the example below for more details on how and when to do this.

From: Angular's official documentation.

Thanks. For anyone else wondering, this isn't limited to 1.3: http://code.angularjs.org/1.2.12/docs/api/ng.$interval — Hakan B., Mar 11 '14 at 21:04

score 9 · Answer 3 · answered Aug 21 '12 at 07:53

9

You should use $scope.$apply() when you execute an angular expression from outside of the angular framework.

function countController($scope){
    $scope.countDown = 10;    
    var timer = setInterval(function(){
        $scope.countDown--;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);  
}

http://jsfiddle.net/andreev_artem/48Fm2/

answered Aug 21 '12 at 07:53

Artem Andreev

19,942
5
43
42

17

Directly using setTimeOut or setInterval is not a good practice in Angular. You should be using the $timeout service. – ganaraj Aug 21 '12 at 10:10
5

@ganaraj It depends on the task. Practicality beats purity. – Artem Andreev Aug 21 '12 at 17:35
4

There is the $timeout service in AngularJS that would call $apply automatically. – pkozlowski.opensource Aug 21 '12 at 21:04
1

@pkozlowski.opensource Thanks, you didn't say anything new. I am able to read answers and comments :) I think that it is good to have two answers. One explains why code doesn't work and how you can make it work. And another that explains how it could be done in more angular way. – Artem Andreev Aug 22 '12 at 06:00
Your answer is much better. You are using interval which is much more suitable for a counter. – guy mograbi Apr 07 '13 at 06:12
@ganaraj can you give show the code to achieve the same with $timeout service? – Dipesh KC Sep 22 '13 at 04:27

score 7 · Answer 4 · edited May 23 '17 at 11:46

I updated Mr. ganaraj answer to show stop and resume functionality and added angular js filter to format countdown timer

it is here on jsFiddle

controller code

'use strict';
var myApp = angular.module('myApp', []);
myApp.controller('AlbumCtrl', function($scope,$timeout) {
    $scope.counter = 0;
    $scope.stopped = false;
    $scope.buttonText='Stop';
    $scope.onTimeout = function(){
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout,1000);
    }
    var mytimeout = $timeout($scope.onTimeout,1000);
    $scope.takeAction = function(){
        if(!$scope.stopped){
            $timeout.cancel(mytimeout);
            $scope.buttonText='Resume';
        }
        else
        {
            mytimeout = $timeout($scope.onTimeout,1000);
            $scope.buttonText='Stop';
        }
            $scope.stopped=!$scope.stopped;
    }   
});

filter-code adapted from RobG from stackoverflow

myApp.filter('formatTimer', function() {
  return function(input)
    {
        function z(n) {return (n<10? '0' : '') + n;}
        var seconds = input % 60;
        var minutes = Math.floor(input / 60);
        var hours = Math.floor(minutes / 60);
        return (z(hours) +':'+z(minutes)+':'+z(seconds));
    };
});

I don't think the format timer is return the correct answer.. Let say the input is 7200. it would return 02:120:00. I think you should format the timer by calculating hour first. — Bobby Stenly, Nov 11 '16 at 11:50

score 1 · Answer 5 · answered Dec 20 '14 at 05:59

It might help to "How to write the code for countdown watch in AngularJS"

Step 1 : HTML Code-sample

<div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
</div>

Step 2 : The AngulaJs code-sample

function ExampleCtrl($scope, $timeout) {
  var countDowner, countDown = 10;
  countDowner = function() {
    if (countDown < 0) {
      $("#warning").fadeOut(2000);
      countDown = 0;
      return; // quit
    } else {
      $scope.countDown_text = countDown; // update scope
      countDown--; // -1
      $timeout(countDowner, 1000); // loop it again
    }
  };

  $scope.countDown_text = countDown;
  countDowner()
}

The full example over countdown watch in AngularJs as given below.

<!DOCTYPE html>
<html>

<head>
  <title>AngularJS Example - Single Timer Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script>
    function ExampleCtrl($scope, $timeout) {
      var countDowner, countDown = 10;
      countDowner = function() {
        if (countDown < 0) {
          $("#warning").fadeOut(2000);
          countDown = 0;
          return; // quit
        } else {
          $scope.countDown_text = countDown; // update scope
          countDown--; // -1
          $timeout(countDowner, 1000); // loop it again
        }
      };

      $scope.countDown_text = countDown;
      countDowner()
    }
  </script>
</head>

<body>
  <div ng-app ng-controller="ExampleCtrl">
    <div ng-show="countDown_text > 0">Your password is expired in 180 Seconds.</div>
    <div ng-show="countDown_text > 0">Seconds left {{countDown_text}}</div>
    <div ng-show="countDown_text == 0">Your password is expired!.</div>
  </div>
</body>

</html>

score 1 · Answer 6 · edited Oct 01 '21 at 18:33

The way I did , it works!

*angular version 1.5.8 and above.

Angular code

var app = angular.module('counter', []);

app.controller('MainCtrl', function($scope, $interval) {
  var decrementCountdown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < 1) {
      $scope.message = "timed out";
    }
  };
  var startCountDown = function() {
    $interval(decrementCountdown, 1000, $scope.countdown)
  };
  $scope.countdown = 100;
  startCountDown();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>



<body ng-app="counter" ng-controller="MainCtrl">
  {{countdown}} {{message}}
</body>

score 1 · Answer 7 · edited Oct 21 '19 at 15:22

You probably didn't declare your module correctly, or you put the function before the module is declared (safe rule is to put angular module after the body, once all the page is loaded). Since you're using angularjs, then you should use $interval (angularjs equivalence to setInterval which is a windows service).

Here is a working solution:

angular.module('count', [])
  .controller('countController', function($scope, $interval) {
    $scope.countDown = 10;
    $interval(function() {
      console.log($scope.countDown--);
    }, 1000, $scope.countDown);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.1/angular.min.js"></script>


<body>
  <div ng-app="count" ng-controller="countController"> {{countDown}} </div>
</body>

Note: it stops at 0 in the html view, but at 1 in the console.log, can you figure out why? ;)

The code is pretty straight forward if you look up $interval usage here https://docs.angularjs.org/api/ng/service/$interval. $interval starts a service that decreases countDown every seconds (ie. 1000 = 1sec), and the third parameter tells it to do it 10x (since $scope.countDown initial value is 10). — Tan Tran, Jun 14 '18 at 17:53

score 0 · Answer 8 · answered Aug 10 '14 at 14:39

0

function timerCtrl ($scope,$interval) {
    $scope.seconds = 0;
    var timer = $interval(function(){
        $scope.seconds++;
        $scope.$apply();
        console.log($scope.countDown);
    }, 1000);
}

answered Aug 10 '14 at 14:39

Betite

115
4
11

score 0 · Answer 9 · answered Apr 17 '17 at 07:15

var timer_seconds_counter = 120;
$scope.countDown = function() {
      timer_seconds_counter--;
      timer_object = $timeout($scope.countDown, 1000);
      $scope.timer = parseInt(timer_seconds_counter / 60) ? parseInt(timer_seconds_counter / 60) : '00';
      if ((timer_seconds_counter % 60) < 10) {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? '0' + (timer_seconds_counter % 60) : '00');
      } else {
        $scope.timer += ':' + ((timer_seconds_counter % 60) ? (timer_seconds_counter % 60) : '00');
      }
      $scope.timer += ' minutes'
      if (timer_seconds_counter === 0) {
        timer_seconds_counter = 30;
        $timeout.cancel(timer_object);
        $scope.timer = '2:00 minutes';
      }
    }

score 0 · Answer 10 · answered Oct 19 '20 at 22:25

$scope.countDown = 30;
var timer;
$scope.countTimer = function () {
    var time = $timeout(function () {
         timer = setInterval(function () {
             if ($scope.countDown > 0) {
                 $scope.countDown--;
            } else {
                clearInterval(timer);
                $window.location.href = '/Logoff';
            }
            $scope.$apply();
        }, 1000);
    }, 0);
}

$scope.stop= function () {
    clearInterval(timer);
    
}

IN HTML:

<button type="submit" ng-click="countTimer()">Start</button>
<button type="submit" ng-click="stop()">Clear</button>

angularjs make a simple countdown

10 Answers10

JavaScript code:

HTML markup:

Linked