/TypeScript/Display digital clock in angular

Display digital clock in angular

// 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>

Similar codes

0 vote249 views1 answer
CSS is being used to hide three items on the index.html page (two <li> elements and a <div> element). Use jQuery's :hidden pseudo selector and the show() method to display the hidden <li> elements, while leaving the <div> elem
TypeScript
0 vote277 views1 answer
Not working npx react-native init MyApp --template react-native-template-typescript
TypeScript
8 votes320 views6 answers
Woocommerce products shortcode
TypeScript
0 vote267 views1 answer
Creating different objects in node.js
TypeScript
4 votes261 views1 answer
How to add an element to a Typescript array
TypeScript
11 votes248 views4 answers
If a class exists jquery
TypeScript
9 votes254 views3 answers
Angular append array to another
TypeScript
1 vote268 views3 answers
How to make all elements in array int python
TypeScript
0 vote258 views1 answer
Check type of object typescript
TypeScript
8 votes265 views1 answer
Split list into lists of equal length python
TypeScript