running clock in Angular 4.3

Question

I want a running clock (Digital) on one of mine Angular 4.3 application.

I tried lots of R&D for that, but didn't get succeed.

also there is no reference of angular ticking clock.

So I tried to Add solution based on java script, but it also not working.

see below code.

startTime() {    
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = this.checkTime(m);
  s = this.checkTime(s);   

  var t = setTimeout(this.startTime, 500);
  this.clock = commonSetting.formatedDate(h + ":" + m + ":" + s); // this is the variable that I am showing on the front end.    
}

checkTime(i) {
  if (i < 10) { i = "0" + i };  // add zero in front of numbers < 10
  return i;
}

I don't even know this is good practice or not.

can anyone help me with this?

So, after a lot of R&D, you ended up with 0 line of code? Post what you tried. Explain what the concrete problem is. — JB Nizet, Sep 19 '17 at 12:44
@JBNizet : thanks for this plunker, but Is there no other way for this, because I also need lots of modification on it.. — Bharat, Sep 19 '17 at 12:52
What you posted is incomplete code, and the only know about your attempt to run it is that is is "not working". We can't help with that. Post a complete minimal example, and tell **precisely** what doesn't work: what you expect it to do, and what it does instead. Learn about arrow functions: passing `this.startTime` as a callback won't work. — JB Nizet, Sep 19 '17 at 12:53
*I also need lots of modification on it*: then do these modifications. How could I know what the problem is if you don't tell? — JB Nizet, Sep 19 '17 at 12:53
A way to achieve **what**? You asked for a digital clock. I provided one. What else do you need? — JB Nizet, Sep 19 '17 at 13:01

Bharat · Accepted Answer · 2017-09-23T10:56:58.660

Earlier what I did was totally wrong.

Now, My actual scenario has Dropdown and on each dropdown change event, I have to start new clock and have to Stop previous one.

Then, I followed comment of JB Nizet, and I achieved running clock using below code.

TypeScript code

Defined one global Date variable in export class.

time: Date;

Then in Change method of drop down, I Added my solution.

//get current date time, you can set your own Date() over here
var stationdate = new Date(date_from_dropdown_change);

//clear Interval, it's my system requirement
if(this.prevNowPlaying) {
    clearInterval(this.prevNowPlaying);
}

// set clock and Interval
this.prevNowPlaying  = setInterval(() => {         
    stationdate = new Date(stationdate.setSeconds(stationdate.getSeconds() + 1));
    this.time = stationdate;
}, 1000);

Now, this.Time will get updated per second.

Html

<p class="localtime_p">{{ time | date:'MMM dd,yyyy HH:mm:ss'}}</p>

And currently it's working fine when I posted this answer..

joshrathke · Answer 2 · 2017-09-19T13:17:39.020

If it were me, I would use Moment.js and set up an interval function in the constructor() of the component to update the clock property every second. Then you can display the clock property throughout the component accordingly.

Component

constructor() {
    // Runs the enclosed function on a set interval.
    setInterval(() => {
        this.clock = moment().format('MMMM Do YYYY, h:mm:ss a');
    }, 1000) // Updates the time every second.
}

Alternatively you could save a basic timestamp to the property in your component and then use a pipe on the front end like Angular2-moment. I would probably go this route as it affords you more flexibility with the clock property in terms of being able to reuse it elsewhere without messing around with the format too much.

Angular2 Moment Pipe

{{ clock | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a' }}

thanks @josh, I was thinking about moment as last option, but I got one great idea from the comment of #JB Nizet, it's simple one. — Bharat, Sep 19 '17 at 13:18

running clock in Angular 4.3

2 Answers2