Angular Countdown Directive

by Posted on

Countdown help to display timer for selected event like something is going to expiry or live on following time. Like if you have created a deal section on your angular page and want to display deal expiry countdown then this Angular Countdown Directive is useful for you. you cal also see Popular jQuery countdown list and choose as per your need.

Angular Countdown Directive

HTML

<div style="text-align: right">
  <a target="_blank" class="gh" href="https://github.com/hughanderson4/angular-countdown" rel="noopener noreferrer">View project on GitHub</a>
</div>
 
 
 
 
 
 
 
<div ng-app="app" ng-controller="demoController as vm" style="text-align: center">
 
 
 
 
<div class="countdown-con countdown-xs">
        <countdown countdown-id="cd1" countdown-title="Days Until Christmas" target-date="vm.xmas"></countdown>
</div>
 
 
 
 
 
 
 
 
 
 
<hr>
 
 
 
 
 
 
 
 
 
 
<div class="countdown-con countdown-sm orange">
        <countdown countdown-id="cd2" countdown-title="Hours Until Tomorrow" target-date="vm.tomorrow"></countdown>
</div>
 
 
 
 
 
 
 
 
 
 
<hr>
 
 
 
 
 
 
 
 
 
 
<div class="countdown-con countdown-md">
        <countdown ng-hide="vm.expired.cd3" countdown-id="cd3" countdown-title="Expiring Countdown" target-date="vm.expiring"></countdown>
 
 
 
 
 
<h2 ng-show="vm.expired.cd3">Expired Countdown!</h2>
 
 
 
 
 
</div>
 
 
 
 
 
 
 
 
 
<hr>
 
 
 
 
 
 
 
 
 
 
<div class="countdown-con countdown-lg orange">
        <countdown countdown-id="cd4" countdown-title="Days Until 2018" target-date="'2018-01-01'"></countdown>
</div>
 
 
 
 
 
<script type="text/ng-template" id="/dist/countdown.html">
<div class="countdown clearfix" ng-class="vm.countdownId">
    <h2 class="text-uppercase" ng-bind="vm.countdownTitleDisplay"></h2>
    <div ng-hide="vm.hasDate">
        <h1 class="coming-soon">Coming Soon</h1>
    </div>
    <div class="countdown-row-con" ng-show="vm.hasDate">
        <div class="row row-colons">
            <div class="col-xs-4" ng-if="vm.days">
                <h1 class="well well-lg">
                    {{vm.days}}
                </h1>
                <h4>Days</h4>
            </div>
            <div class="col-xs-4">
                <h1 class="well well-lg">
                    {{vm.hours}}
                </h1>
                <h4>Hours</h4>
            </div>
            <div class="col-xs-4">
                <h1 class="well well-lg">
                    {{vm.minutes}}
                </h1>
                <h4>Mins</h4>
            </div>
            <div class="col-xs-4" ng-if="!vm.days">
                <h1 class="well well-lg">
                    {{vm.seconds}}
                </h1>
                <h4>Secs</h4>
            </div>
        </div>
    </div>
</div>
</script>
</div>



CSS

body {
  font: 12px Arial;
  background: white;
}
a.gh {
  font-size: larger;
  font-weight: bold;
  text-decoration: none;
  background: blue;
  color: white;
  padding: 6px 14px;
  border-radius: 4px;
}
 
.countdown-con {
    text-align: center;
    font-size: 10px;
}
.countdown-xs {
    font-size: 9px;
}
.countdown-sm {
    font-size: 11px;
}
.countdown-md {
    font-size: 14px;
}
.countdown-lg {
    font-size: 20px;
}
.countdown .well {
    padding: 0;
    display: inline-block;
    width: 1.8em;
    line-height: 1.6em;
    border: 3px solid #54ABAE;
    box-shadow: none;
    background: white;
    margin: 3px auto;
    border-radius: 0;
}
.countdown h1 {
    font-size: 2.5em;
    font-weight: bold;
}
.countdown h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin: 10px 0 5px;
}
.countdown h4 {
    font-size: 1.4em;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 0 5px;
    color: #54ABAE;
}
.countdown .row {
    white-space: nowrap;
}
.countdown .row-colons .col-xs-4:not(:last-child):after {
    content: ':';
    position: absolute;
    font-size: 4.7em;
    right: -0.17em;
    top: -0.12em;
    font-weight: normal;
    color: #54ABAE;
}
.countdown [class^="col-"] {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0 8px;
    position: relative;
}
.countdown-con.orange .well {
    border-color: #FF9E15;
}
.countdown-con.orange h4 {
    color: #FF9E15;
}
.countdown-con.orange .row-colons .col-xs-4:not(:last-child):after {
    color: #FF9E15;
}



AngularJS

  (function() {
    angular.module('app', []);
    angular.module('app').controller('demoController', demoController);
 
    demoController.$inject = ['$scope']; 
    function demoController($scope) {
      var vm = this;
      vm.tomorrow = new Date();
      vm.tomorrow.setHours(24,0,0,0); // midnignt tomorrow
 
      vm.xmas = new Date();
      vm.xmas.setMonth(11);
      vm.xmas.setDate(25);
      vm.xmas.setHours(0,0,0,0); // midnignt
 
      vm.expired = {};
 
      vm.expiring = new Date();
      vm.expiring.setTime(vm.expiring.getTime() + 1000 * 10); // expiring in 10 seconds
 
      $scope.$on('countdown-expired', function(event, exp) {
        vm.expired[exp.name] = true;
      });
    }
 
    angular.module('app').controller('countdownController', countdownController);
    countdownController.$inject = ['$interval', '$scope']; 
 
    function countdownController($interval, $scope) {
      /* jshint validthis:true */
      var vm = this;
      vm.targetDate;  // targetDate is bound via the directive
      vm.countdownTitle; // title is bound via the directive
      vm.countdownId; // countdownId is bound via the directive
      vm.countdownTitleDisplay = vm.countdownTitle;
 
      if (vm.targetDate == '') {
        vm.targetDate = null;
      }
 
      vm.hasDate = !!vm.targetDate;
      if (!vm.hasDate) {
        vm.countdownTitleDisplay = vm.countdownTitle.replace("Coming In", '');
        return;
      }
 
      var endDate = new Date(vm.targetDate);
 
      vm.days;
      vm.hours;
      vm.minutes;
      vm.seconds;
 
      var msPerSecond = 1000;
      var msPerMinute = 60 * msPerSecond;
      var msPerHour = msPerMinute * 60;
      var msPerDay = msPerHour * 24;
      var stop;
 
      activate();
 
      function activate() {
        var timeDiff = endDate.getTime() - new Date().getTime();
        if (timeDiff &lt;= 0) {
          vm.days = vm.hours = vm.minutes = vm.seconds = 0;
          stop &amp;&amp; $interval.cancel(stop);
          stop = undefined;
          $scope.$emit('countdown-expired', { name: vm.countdownId });
          return;
        }
 
        vm.days = Math.floor(timeDiff / msPerDay);
        timeDiff -= vm.days * msPerDay;
        vm.hours = Math.floor(timeDiff / msPerHour);
        timeDiff -= vm.hours * msPerHour;
        vm.minutes = Math.floor(timeDiff / msPerMinute);
        timeDiff -= vm.minutes * msPerMinute;
        vm.seconds = Math.floor(timeDiff / msPerSecond);
      }
 
      stop = $interval(activate, msPerSecond);
    }
 
    angular.module('app').directive('countdown', countdown);
    countdown.$inject = [];
 
    function countdown () {
      // Usage:
      //     <countdown></countdown>
      // Creates:
      // 
      return {
        restrict: 'E',
        templateUrl: '/dist/countdown.html',
        controller: 'countdownController',
        controllerAs: 'vm',
        scope: {
          targetDate: '=',
          countdownTitle: '@',
          countdownId: '@'
        },
        bindToController: true
      };
    }
})();

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by HugeHugh. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by admin