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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  time: number = 3570;
  tmpTime: number;
  day: number;
  hour: number;
  minutes: number;
  seconds: number;
  interval;

  startTimer() {
    this.interval = setInterval(() => {
      this.time++;
      this.tmpTime = this.time;
    this.day = Math.floor(this.tmpTime / (3600*24));
    this.tmpTime  -= this.day*3600*24;
    this.hour = Math.floor(this.tmpTime / 3600);
    this.tmpTime  -= this.hour*3600;
    this.minutes = Math.floor(this.tmpTime / 60);
    this.tmpTime  -= this.minutes*60;
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }

  resetTimer() {
    this.time = 0;
  }
}

_______________________

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>
<button (click)='resetTimer()'>Reset</button>


<p>{{time}}</p>

<div *ngIf="time > 0">
<p *ngIf="tmpTime >= 0 && minutes == 0 && hour == 0 && day == 0 ">
{{tmpTime}} Seconds
</p>
<div *ngIf="tmpTime >= 0 && minutes > 0 && hour == 0 && day == 0">
  <div [ngPlural]="minutes">
  <ng-template ngPluralCase="=1">{{minutes}} Minute, {{tmpTime}} Seconds</ng-template>
  <ng-template ngPluralCase="other">{{minutes}} Minutes, {{tmpTime}} Seconds</ng-template>
</div>
</div>
<div *ngIf="tmpTime >= 0 && minutes >= 0 && hour > 0 && day == 0">
    <div [ngPlural]="hour">
  <ng-template ngPluralCase="=1">{{hour}} Hour, {{minutes}} Minutes, {{tmpTime}} Seconds</ng-template>
  <ng-template ngPluralCase="other">{{hour}} Hours, {{minutes}} Minutes, {{tmpTime}} Seconds</ng-template>
</div>
</div>
<div *ngIf="tmpTime >= 0 && minutes >= 0 && hour >= 0 && day > 0">
      <div [ngPlural]="day">
  <ng-template ngPluralCase="=1">{{day}} Day, {{hour}} Hour, {{minutes}} Minutes, {{tmpTime}} Seconds</ng-template>
  <ng-template ngPluralCase="other">{{day}} Days, {{hour}} Hour, {{minutes}} Minutes, {{tmpTime}} Seconds</ng-template>
</div>
</div>