Breaking News: Grepper is joining You.com. Read the official announcement!

Display digital clock in angular

Vivacious Vendace answered on September 17, 2021 Popularity 7/10 Helpfulness 8/10

answer Display digital clock in angular

related Display digital clock in angular

Display digital clock in angular

Comment

// in ts file

import { Component, OnInit } from '@angular/core';
import { Subscription, timer } from 'rxjs';
import { map, share } from "rxjs/operators";
import { OnDestroy } from '@angular/core';


@Component({
  selector: 'app-clock',
  templateUrl: './clock.component.html',
  styleUrls: ['./clock.component.scss']
})
export class ClockComponent implements OnInit, OnDestroy {

  date: Date = new Date();

  constructor() {
  }

  time = new Date();
  rxTime = new Date();
  intervalId;
  subscription: Subscription;

  ngOnInit() {
    // Using Basic Interval
    this.intervalId = setInterval(() => {
      this.time = new Date();
    }, 1000);

    // Using RxJS Timer
    this.subscription = timer(0, 1000)
      .pipe(
        map(() => new Date()),
        share()
      )
      .subscribe(time => {
        this.rxTime = time;
      });
  }

  ngOnDestroy() {
    clearInterval(this.intervalId);
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

}

// in html
 Simple Clock:
 <div>{{ time | date: 'hh:mm:ss a' }}</div>
 RxJS Clock:
 <div>{{ rxTime | date: 'hh:mm:ss a' }}</div>

Popularity 7/10 Helpfulness 8/10 Language typescript

Source: Grepper

Tags: angular clock digital display typescript

Link to this answer
Share Copy Link

Contributed on Sep 17 2021

Vivacious Vendace

0 Answers Avg Quality 2/10

Closely Related Answers

Display digital clock in angular

Comment

where is the SCSS

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: clock digital display javascript angular

Link to this answer
Share Copy Link

Contributed on Aug 15 2022

Modern Monkey

0 Answers Avg Quality 2/10

Display digital clock in angular

Contents

More Related Answers

Display digital clock in angular

Closely Related Answers

Display digital clock in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.