CODEWITHSUNDEEP
angulartypescript
user7705439
user7705439

Reputation:

Angular2 Update my clock every second

I am working on something in Angular2 and I need to update my clock every second. I just don't know how I can make my clock as it works now, to update every second.

this is my COMPONENT.TS File: 

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

         @Component({
            selector: 'page-header',
            templateUrl: './pageheader.component.html',
            styleUrls: ['./pageheader.component.css']
         })

         export class PageHeaderComponent {

              Housestyle = 'Dit is de huisstyle'

              Clock = Date.now();
         }

And this is my HTML:

       <div id="container">
            <div id="left">{{Housestyle}}</div>
            <div id="right">{{Clock | date:'HH:mm'}}</div>
            <div id="center"></div>
       </div>

Upvotes: 1

Views: 2017

Answers (2)

Efe
Efe

Reputation: 5796

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

     @Component({
        selector: 'page-header',
        templateUrl: './pageheader.component.html',
        styleUrls: ['./pageheader.component.css']
     })

     export class PageHeaderComponent {

          Housestyle = 'Dit is de huisstyle'

          Clock = Date.now();

          public ngOnInit() {
            setInterval(() => {
              this.Clock = Date.now();
            }, 1000);
          }
     }

and also add seconds in your filter in the template

<div id="right">{{Clock | date:'HH:mm:ss'}}</div>

Upvotes: 2

Lex
Lex

Reputation: 7194

Use an interval.

import {Observable} from 'rxjs/Rx';

Observable.interval(1000).subscribe(x => {
    Clock = Date.now();
});

Upvotes: 2

Related Questions