How to refresh the date in Angular 4

Question

Please how can I refresh a date in angular 4

I need to display dynamically the date in the web page.

This is my code:

import { Component } from '@angular/core';

import * as moment from "moment";

 @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
 })
 export class AppComponent {
      title = 'My First Angular application';
      oneHourAgo: string = "";
      EightHoursAgo: string = "";
      constructor(  ) { 

  }

  curTime() {
         let now = moment().format("YYYY-MM-DD HH:mm:ss");
         return now;
  }    

}

What did you write in html file? – Paresh Gami Mar 29 '19 at 11:15 — Paresh Gami, Mar 29 '19 at 11:15

danday74 · Accepted Answer · 2019-03-29T11:24:07.297

Simply bind the result to the template like this:

export class AppComponent implements OnInit, OnDestroy {
  myTime
  myInterval
  title = 'My First Angular application';
  oneHourAgo: string = "";
  EightHoursAgo: string = "";
  constructor () {}

  // you may want to use ngOnInit to call curTime   
  ngOnInit() {
    this.curTime()
    this.myInterval = setInterval(() => {
      this.curTime()
    }, 1000)
  }

  // if using setInterval then be sure to clean up else it will keep
  // firing after the component is destroyed
  ngOnDestory() {
    clearInterval(this.myInterval)
  }

  curTime() {
     console.log('hello i am updating the displayed time')
     this.myTime = moment().format("YYYY-MM-DD HH:mm:ss");
  }
}

and in the HTML template for the component:

<div>{{ myTime }}</div>

Whatever you do make sure curTime() is being called. I presume you are calling it in the HTML.

Probably you can use interval() operator from rxjs – Mahesh Mar 29 '19 at 11:30 — Mahesh, Mar 29 '19 at 11:30

How to refresh the date in Angular 4

1 Answers1