srr-elapsedtimer
v1.1.0
Published
An angular library to create a elapsed timer for your angular project
Downloads
2
Maintainers
Readme
Table of contents
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
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 timerElapsedtimerService.pauseTimer()
Pause the timerElapsedtimerService.resumeTimer()
Resume the timerElapsedtimerService.delayStart(seconds:number)
Start the timer with a delayElapsedtimerService.setTimerExceedColourChange(exceedColour: string, hour: number, minutes: number, seconds: number)
When the timer exceeds a certain time, the colour of the timer will get changedElapsedtimerService.resetTimer()
Reset the timerElapsedtimerService.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
License
srr-elapsedtimer is MIT licensed.