srr-elapsedtimer

An angular library which helps you to create a elapsed timer easily

Table of contents

• Browser Support
• Features
• Demo
• Installation
• Usage
• Methods
• Useful Tips
• Versioning
• Creator
  • Sankha Rathnayake
• License

Browser Support

Chrome	Firefox	IE / Edge	Safari	Opera
Latest ✔	Latest ✔	IE11, Edge ✔	Latest ✔	Latest ✔

Features

• Angular 10 Support
• Customize the font, font colour and font size of the timer
• Get the current time of the timer as full time string, hours, minutes or seconds
• Start, Pause, Resume, and Reset the timer
• Start the timer with a delay
• Set the timer to change it's colour after a certain time

Demo

Working Demo

Installation

srr-elapsedtimer is available via npm

Using npm:

$ npm install srr-elapsedtimer --save

Usage

Import ElapsedtimerModule in in the root module(AppModule): Also Add CUSTOM_ELEMENTS_SCHEMA to @angular/core import statement and also to schemas array in @NgModule

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { ElapsedtimerModule } from "srr-elapsedtimer";

@NgModule({
  imports: [
    // ...
    ElapsedtimerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Add ElapsedtimerService service wherever you want to use the srr-elapsedtimer.

import { ElapsedtimerService } from "srr-elapsedtimer";

class AppComponent implements OnInit {
  constructor(private timer: ElapsedtimerService) {}

  ngOnInit() {
    
     this.timer.startTimer(); //This is simple example on how we can use a function

  }
}

Now use in your template

<srr-elapsedtimer></srr-elapsedtimer>

See Demo

Methods

• ElapsedtimerService.startTimer() Start the timer
• ElapsedtimerService.pauseTimer() Pause the timer
• ElapsedtimerService.resumeTimer() Resume the timer
• ElapsedtimerService.delayStart(seconds:number) Start the timer with a delay
• ElapsedtimerService.setTimerExceedColourChange(exceedColour: string, hour: number, minutes: number, seconds: number) When the timer exceeds a certain time, the colour of the timer will get changed
• ElapsedtimerService.resetTimer() Reset the timer
• ElapsedtimerService.setTimerSettings(fontName: string,fontColour: string,fontSize: string) Set the font, font colour and the font size of the timer

Useful Tips

• Make sure you've added CUSTOM_ELEMENTS_SCHEMA as your schema in your main module. Refer Usage

Versioning

srr-elapsedtimer will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Sankha Rathnayake

• @GitHub

License

srr-elapsedtimer is MIT licensed.