How to Create Count down timer selecting Time from the Time picker input and show the difference of selected Time to current Time in angular

Question

This is my Typescript file

import { Time } from '@angular/common';
import { Component, OnInit, Pipe, PipeTransform } from '@angular/core';
import {  interval, Subscription, timer } from 'rxjs';
import {NgbTimeStruct} from '@ng-bootstrap/ng-bootstrap';



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

export class TimerAppComponent implements OnInit {

time : NgbTimeStruct= {hour: 13, minute: 30 , second: 25};
   
seconds = true;


constructor() { }

ngOnInit() {
   this.startInterval();
   console.log(this.time)
}
ngOnDestroy(){
    this.subscription.unsubscribe();
}

stop(){
   this.countDown.unsubscribe();
}
start(){
     this.countDown = timer(0, this.tick).subscribe(() => --this.counter);
}


private timeinterval = interval;
private subscription!: Subscription;

public dateNow = new Date();
public dDay = this.model.getTime();
milliSecondsInASecond = 1000;
hoursInADay = 24;
minutesInAnHour = 60;
SecondsInAMinute = 60;

public timeDifference: any;
public secondsToDday: any;
public minutesToDday: any;
public hoursToDday: any;
public daysToDday: any;

private getTimeDifference() {
   this.dDay = this.time
   this.timeDifference = this.dDay - new Date().getTime();
   this.allocateTimeUnits(this.timeDifference);
}

private allocateTimeUnits(timeDifference: any) {
   this.secondsToDday = Math.floor(
    (timeDifference / this.milliSecondsInASecond) % this.SecondsInAMinute
);
 this.minutesToDday = Math.floor(
    (timeDifference / (this.milliSecondsInASecond * this.minutesInAnHour)) %
     this.SecondsInAMinute
);
 this.hoursToDday = Math.floor(
   (timeDifference /
     (this.milliSecondsInASecond *
      this.minutesInAnHour *
      this.SecondsInAMinute)) %
    this.hoursInADay
);
this.daysToDday = Math.floor(
  timeDifference /
    (this.milliSecondsInASecond *
      this.minutesInAnHour *
      this.SecondsInAMinute *
      this.hoursInADay)
);}


 stopInterval() {
   this.subscription.unsubscribe();
 }
 startInterval() {
   this.subscription = this.timeinterval(1000).subscribe(x => {
  //  console.log('get TD', this.timeDifference);
  this.getTimeDifference();
 
 });
 }
}

I'm facing the problem in my logic I don't know how to perform the logic for starting the count down after selecting the time from the input when I select the time it is displaying in my variable but the count down is not started, and the count down gives no response please anyone can help me how I can do this

This is my HTML file where I want to show the count down

   <div class="container">
       <h1 class="text-success">Date Picker App</h1>
       <ngb-timepicker [(ngModel)]="time" [seconds]="seconds" ></ngb-timepicker>
       <hr>
       <pre> Seleted TIme Is : <strong>{{newTime}}</strong></pre>
  </div>

 <!--Count Down Timer DIsplay -->

  <div class="timer" *ngIf="model">
        <h2>Time Left</h2>

        <span id="hours"> {{hoursToDday}} </span>Hrs
        <span id="minutes"> {{minutesToDday}} </span>Min
        <span id="seconds"> {{secondsToDday}} </span>S <br>
        <div class="mt-3">
            <button  (click)="stopInterval()" class="btn btn-danger btn- 
            sm">Stop</button>
            <button  (click)="startInterval()" class="btn btn-info btn-sm 
            "id="resetbtn">Restart</button>
        </div>

Answer 1

Use the below code stackblitz link , stackblitz

import { Component } from '@angular/core';
import { NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
import { Subscription } from 'rxjs';
import { interval } from 'rxjs/observable/interval';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 12';
  time: NgbTimeStruct = {
    hour: 2,
    minute: 50,
    second: 50
  };
  seconds = true;
  // timeData= this.time

  constructor() {}
  newInterVal: any;
  public timeDifference: any;
  public timeDiffereneRunning: NgbTimeStruct = null;
  public secondsToDday: any;
  public minutesToDday: any;
  public hoursToDday = this.time.hour;

  private getTimeDifference() {
    // this.dDay = this.time

    this.allocateTimeUnits();
  }
  private allocateTimeUnits() {
    let dateNow = new Date();

    let seconds = Math.floor(
      (new Date(this.timeDifference).getTime() - dateNow.getTime()) / 1000
    );
    let minutes = Math.floor(seconds / 60);
    let hours = Math.floor(minutes / 60);
    let days = Math.floor(hours / 24);

    hours = hours - days * 24;
    minutes = minutes - days * 24 * 60 - hours * 60;
    seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;

    this.hoursToDday = hours;

    this.minutesToDday = minutes;
    this.secondsToDday = seconds;
  }

  //  Start Stop Implementation

  ngOnInit() {
    this.startInterval();
    console.log(this.time);
  }
  ngOnDestroy() {}

  stopInterval() {
    this.timeDiffereneRunning = {
      hour: this.hoursToDday,
      minute: this.minutesToDday,
      second: this.secondsToDday
    };
    clearInterval(this.newInterVal);
  }
  startInterval() {
    let time_diff = this.time;
    if (this.timeDiffereneRunning) {
      time_diff = this.timeDiffereneRunning;
    }
    let newDate = new Date(
      new Date().setHours(new Date().getHours() + time_diff.hour)
    );
    newDate = new Date(
      newDate.setMinutes(newDate.getMinutes() + time_diff.minute)
    );
    newDate = new Date(
      newDate.setSeconds(newDate.getSeconds() + time_diff.second)
    );
    this.timeDifference = newDate;
    console.log('diff', new Date(this.timeDifference));

    this.newInterVal = setInterval(() => {
      this.getTimeDifference();
    }, 1000);
  }
  getValue() {
    console.log(
      'Value Of Hour:',
      this.time.hour,
      'Value Of Minute:',
      this.time.minute,
      'Value Of Seconds:',
      this.time.second
    );
    //  console.log('Value Of Minute',this.time.minute)
    //  console.log('Value Of Seconds', this.time.second)
    //  console.log({data: this.time})
  }
}