timer

https://medium.com/web-developer/create-a-stopwatch-ionic-3-angular-5-d45bc0358626

replace: <ion-col class="col-12" *ngIf="!running && time == blankTime">

with

 <ion-col class="col-12" *ngIf="!running">

translate pipe not working  remove this one also

home.html

<div class="stopwatch pt-3">
      <h1 text-center class="color-white font-lg">
        {{time}}
      </h1>    <ion-grid>
      <ion-row text-center class="mt-5">
        <ion-col class="col-12" *ngIf="!running && time == blankTime">
          <button class="circle-button circle-button-bg font-md" ion-button (tap)="start()">{{ 'start' | translate }}</button>
        </ion-col>
        <ion-col class="col-12" *ngIf="running">
          <button class="circle-button circle-button-bg circle-button-red font-md" ion-button (tap)="stop()">{{ 'stop' | translate }}</button>
        </ion-col>
      </ion-row>
    </ion-grid>
</div>

home.ts
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {public timeBegan = null
  public timeStopped:any = null
  public stoppedDuration:any = 0
  public started = null
  public running = false  public blankTime = "00:00.000"
  public time = "00:00.000"  start() {
    if(this.running) return;    if (this.timeBegan === null) {
        this.reset();
        this.timeBegan = new Date();
    }    if (this.timeStopped !== null) {
      let newStoppedDuration:any = (+new Date() - this.timeStopped)
      this.stoppedDuration = this.stoppedDuration + newStoppedDuration;
    }    this.started = setInterval(this.clockRunning.bind(this), 10);
      this.running = true;
    }    stop() {
      this.running = false;
      this.timeStopped = new Date();
      clearInterval(this.started);
   }    reset() {
      this.running = false;
      clearInterval(this.started);
      this.stoppedDuration = 0;
      this.timeBegan = null;
      this.timeStopped = null;
      this.time = this.blankTime;
    }    zeroPrefix(num, digit) {
      let zero = '';
      for(let i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    }    clockRunning(){
      let currentTime:any = new Date()
      let timeElapsed:any = new Date(currentTime - this.timeBegan - this.stoppedDuration)
      let hour = timeElapsed.getUTCHours()
      let min = timeElapsed.getUTCMinutes()
      let sec = timeElapsed.getUTCSeconds()
      let ms = timeElapsed.getUTCMilliseconds();    this.time =
      this.zeroPrefix(hour, 2) + ":" +
      this.zeroPrefix(min, 2) + ":" +
      this.zeroPrefix(sec, 2) + "." +
      this.zeroPrefix(ms, 3);
    };
}

home.scss
h1{
    letter-spacing: 0.035em
}
.stopwatch{
    min-height: 50vh;
}
.result{
    height: 50vh;
    overflow-y: scroll;
}
.circle-button{
    border-radius: 50%;
    height: 75px;
    width: 75px;
    background-color:white;
    border: 1px solid white;
    box-shadow: inset 0 0 0 3px #00b8a4;
    color:black;
}
.circle-button-red{
    box-shadow: inset 0 0 0 3px #FF655B;
}
.circle-button-bg{
    height: 125px;
    width: 125px;
}
.circle-button-md{
    height: 105px;
    width: 105px;
}
.bg-none{
    background:none;
    color:white;
}
.color-white{
    color:white;
}
.bg-green{
    background-color: #00b8a4;
}
.bg-pink{
    background-color: #FF655B;
}
.bg-white{
    background-color:white;
}
.bg-whitesmoke{
    background-color:whitesmoke;
}
.text-light{
    color: #675d5d;
}
.text-lighter{
    color: #c2afaf;
}
.border-bottom{
    border-bottom: 1px solid #7CCBE9;
}.border-bottom-light{
  border-bottom: 1px solid #D3D3D3 !important;
}