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

 

 

Demo

 

 

Usage

 

 

import CountdownModule

import { CountdownModule } from 'ngx-countdown';

@NgModule({
  imports: [ BrowserModule, CountdownModule ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2、Template

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

Method

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` };
}

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

Leave a Reply