AngulsrJS 2.x LocalStorage CountDown Timer
A countdown timer that write the data into the localStorage of the browser. It's being used incase of: -You want to refresh the page and continue from where you left off. -You want to get notified when the time is up ( Event ) and trigger something.
$ npm install --save angularjs-2-localstorage-timer
Usage example
A full-featured working example can be found when running in the root folder
Inisde node_modules/angularjs-2-localstorage-timer
npm installnpm start
Init our timer
In AngularJS 2.x we need to inject the timer into our component
{ // this.AppTimer is our timer}
// Init with properties ( inside our app.component.ts )thisAppTimer;
Events
{ // Events thisbroadcasteron<string>'CountDownTimerChangeEvent'; thisbroadcasteron<string>'CountDownTimerEndEvent';}
Timer Functions
.start()
Start/Resume the timer
Start
.stop()
Stop our timer
Stop
.restart()
Restart the timer with the values given when creating the timer.
Timer won't start running, need to use start()
Restart
.update()
Update one of the following parameters:
- id ( string )
- counter ( integer )
- interval ( integer )
The update action will:
- save the values into
LocalStorage
as well - It won't restart the timer or take any other action, meaning: -- If we've updated the value while the timer is running - it will continue running from the new value
Update
.destory()
Remove the timer entirly from LocalStorage
.
Remember that in order to continue from where we left off - the timer is always there ...
Remove
Timer Information
.getCounter()
Will return the exiting counter value
thiscounter = thisAppTimer
Or, live information via HTML
{{ AppTimer.getCounter() }}
.getLastUpdate()
Will return the "last updated" value that the timer has stored.
The value is a Date()
object.
thislastUpdate = thisAppTimer;
Or, live information via HTML
{{ AppTimer.getLastUpdate() }}
.getInfo()
Return as JSON
all the possible information stored in LocalStorage
.
You can review all data when adding to the template:
thistimer_information = thisAppTimer
Or, live information via HTML
{{ AppTimer.getInfo() | json }}
Further Custom Actions
.reload()
So the reload()
isn't really there ... we need to write it on our own in our controller
as:
If $scope.properties.id
- is already found in LocalStorage
- the timer will be reloaded with the last counter.
But if the id
isn't found, it will create a new timer.
{ thisAppTimer; }
.recreate()
Re-create a new timer, overriding the existing timer with the new timer
{ console; thisAppTimer; }