Angular 9 Digital Clock Timer Example Using ngx-countdown Library in Javascript Full Tutorial For Beginners


Welcome folks today in this blog post we will be looking at ngx-countdown library of angular to make a digital clock timer.All the full source code of the application is shown below.




Get Started




In order to get started you need to install the below library using the npm command as shown below



npm i ngx-countdown









import CountdownModule

import { CountdownModule } from 'ngx-countdown';

  imports: [ BrowserModule, CountdownModule ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule { }


<countdown #cd [config]="config" (event)="handleEvent($event)"></countdown>


Name Description
begin() Start countdown, you must manually call when demand: false
restart() Restart countdown
stop() Stop countdown, must call restart when stopped, it’s different from pause, unable to recover
pause() Pause countdown, you can use resume to recover again
resume() Resume countdown
See also  Build a Angular Arithmetic Calculator Web App Using Pure CSS Framework in Browser Using Javascript Full Project For Beginners



Global Config

function countdownConfigFactory(): CountdownGlobalConfig {
  return { format: `mm:ss` };

  imports: [ CountdownModule ],
  providers: [
    { provide: CountdownGlobalConfig, useFactory: countdownConfigFactory }
export class AppDemoModule {}

Leave a Reply