угловая кнопка 6 с меткой времени

Question

Итак, у меня есть эта кнопка переключения, которая выводит метку времени, но она не работает точно так, как я хочу, потому что я хочу, чтобы она была меткой времени при переключении и снова меткой времени при «выключении».Прямо сейчас я получаю две метки времени с одним переключателем.Смотрите здесь:

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

interface TimeStamp {
  startTime: Date;
  stopTime: Date;
}

@Component({
  selector: 'app-root',
  template: `
    <h1>Punch it</h1>
    <toggle-button class="toggle-button"
    (click)="handle()"
      (changed)="checked=$event">
    </toggle-button>
    <p>Your are {{checked ? 'PUNCHED IN' : 'PUNCHED OUT'}}.</p>

    <button (click)="handle()">Stamp</button>

    <p>start : {{timeStamp.startTime|date:'HH:mm:ss.SSS'}}</p>
    <p>Stop: {{timeStamp.stopTime|date:'HH:mm:ss.SSS'}}</p>
  `,


  styles: [ `
    h1 {
      color: #DB5B33;
      font-weight: 300;
      text-align: center;
    }

    .toggle-button {
      margin: 0 auto;
    } 
  `]
})
export class PunchComponent  {
  checked: boolean;
  timeStamp: TimeStamp 

  constructor() { }

  ngOnInit() {
  }

  handle() {
    if (!this.timeStamp) {
      this.timeStamp = {
        startTime: new Date(),
        stopTime: undefined
      }
    } else {
      this.timeStamp.stopTime = new Date()
    }

  }
}

Я хотел бы иметь следующее: 1. Переключатель: TIMESTAMP A 2. Переключатель: TIMESTAMP B

в идеале:

переключатель: TIMESTAMP C переключатель: TIMESTAMP D

и т. Д.

Любая помощь приветствуется.