Countdown

Angular Bootstrap 5 Countdown plugin

Countdown plugin built with the Bootstrap 5. Examples of timers, counters, stopwatch, number counts, counter box & more.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create default Countdown by adding [countdown] input to a container element with a Countdown expiration date value.

Edit in sandbox 
        
            
            <mdb-countdown [countdown]="'31 December 2024 23:59:59'"></mdb-countdown>

Interval

Create interval that will reset timer every time initial countdown ends.

Edit in sandbox 
        
            
        <mdb-countdown
          [countdown]="'5 November 2022 12:35'"
          [countdownInterval]="30"
        ></mdb-countdown>

Label

Create label for each time unit by adding [countdownLabel] with a text of your choice.

Edit in sandbox 
        
            
        <mdb-countdown
          [countdown]="'31 December 2024 23:59:59'"
          [countdownLabelDays]="'Days'"
          [countdownLabelHours]="'Hours'"
          [countdownLabelMinutes]="'Minutes'"
          [countdownLabelSeconds]="'Seconds'"
        ></mdb-countdown>

Separator

Add [countdownSeparator] input to a container element to insert separator between each time unit.

Separator won't be visible for Countdown column position

Edit in sandbox 
        
            
        <mdb-countdown
          [countdown]="'31 December 2024 23:59:59'"
          [countdownSeparator]="':'"
        ></mdb-countdown>

Styling

Countdown position

Change default horizontal position of Countdown with [countdownPosition]="'vertical'"

Edit in sandbox 
        
            
          <mdb-countdown
            [countdown]="'31 December 2024 23:59:59'"
            [countdownPosition]="'vertical'"
        ></mdb-countdown>

Label position

Change default vertical position of Countdown label with [countdownLabelPosition="'horizontal'"]

Edit in sandbox 
        
            
            <mdb-countdown
              [countdown]="'31 December 2024 23:59:59'"
              [countdownTextSize]="'6rem'"
              [countdownLabelSize]="'1.5rem'"
              [countdownLabelDays]="'Days'"
              [countdownLabelHours]="'Hours'"
              [countdownLabelMinutes]="'Minutes'"
              [countdownLabelSeconds]="'Seconds'"
          ></mdb-countdown>

Text size

Change default time unit text size (4rem) with [countdownTextSize].

Edit in sandbox 
        
            
          <mdb-countdown
          [countdown]="'31 December 2024 23:59:59'"
          [countdownTextSize]="'6rem'"
          [countdownLabelSize]="'1.5rem'"
          [countdownLabelDays]="'Days'"
          [countdownLabelHours]="'Hours'"
          [countdownLabelMinutes]="'Minutes'"
          [countdownLabelSeconds]="'Seconds'"
        ></mdb-countdown>

Custom classes

Add custom classes to time unit value and label with [countdownTextStyle] and [countdownLabelStyle]

Edit in sandbox 
        
            
          <mdb-countdown
            [countdown]="'31 December 2024 23:59:59'"
            [countdownTextStyle]="'badge bg-primary'"
            [countdownLabelStyle]="'text-light bg-dark'"
            [countdownLabelDays]="'Days'"
            [countdownLabelHours]="'Hours'"
            [countdownLabelMinutes]="'Minutes'"
            [countdownLabelSeconds]="'Seconds'"
            [countdownUnits]="['days', 'hours', 'minutes', 'seconds']"
        ></mdb-countdown>

Countdown - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section. 

        
            
     npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/countdown

Import

        
            
  import { MdbCountdownModule } from 'mdb-angular-countdown';
  …
  @NgModule ({
    ...
    imports: [MdbCountdownModule],
    ...
  })
  
        
    
        
            
  @import 'mdb-angular-countdown/scss/countdown.scss';

Usage

Create default Countdown by adding [countdown] input to a container element with a Countdown expiration date value. Date value should be passed using proper Date format.

Inputs

Name Type Default Description
[countdown] String '' Initiates Countdown instance on element. Takes the value of the date to which the timer will be counting.
[countdownUnits] CountdownUnit[] ['days', 'hours', 'minutes', 'seconds'] Defines time units to be displayed on element. Possible values: 'days' | 'hours' | 'minutes' | 'seconds'".
[countdownInterval] Number 0 Sets interval in seconds that will reset timer after given amount of time after initial countdown ends.
[countdownLabel] String '' Attached to children element defines time unit label to be displayed on element.
[countdownSeparator] String '' Attached to container element defines separator used between each time unit value. Separator is not visible in vertical position of the Countdown element.
[countdownPosition] 'horizontal' | 'vertical' 'horizontal' Positions Countdown element horizontally or vertically.
[countdownLabelPosition] 'horizontal' | 'vertical' 'vertical' Positions the label at the bottom or next to the corresponding time unit value.
[countdownTextStyle] String '' Adds custom styles to all time unit text elements.
[countdownLabelStyle] String '' Adds custom styles to all labels.
[countdownTextSize] String '' Sets size of time unit text element. Text for labels in vertical label position is four times smaller than time unit text.

Outputs

Name Type Description
startCountdown EventEmitter<void> This event fires immediately when the countdown starts counting.
endCountdown EventEmitter<void> This event fires immediately when the countdown timer stops counting. 
        
            
            <mdb-countdown
            (startCountdown)="onCountdownStart()"
            [countdown]="'31 December 2024 23:29:59'"
          ></mdb-countdown>                                    
            
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss'],
            })
            export class AppComponent {
              onCountdownStart() {
                console.log('countdown start');
              }
            }