Angular - Как добавить больше хронометров с различными функциями при нажатии кнопки добавления хронометра

Question

Я разрабатываю часть хронометра, который измеряет время различных процессов с angular 8 (angular материал) во внешнем интерфейсе и. net ядро ​​для внутреннего интерфейса. Я разработал хронометр, который сохраняет в процессе и другие данные, но требование говорит, что система должна измерять много процессов одновременно, если пользователь хочет. Я добавил кнопку, чтобы добавить другой процесс и хронометр, но здесь начинается мой вопрос: «Мне нужно создать еще одну другую функцию, переменные и данные того же типа, что я создал ранее? ¿А как насчет html? Could как можно сделать это автоматически?

Извините за мой плохой английский sh, и за ответ, я действительно новичок в этом.

Это мой html:

   <mat-grid-tile [rowspan]="1" [colspan]="1">
       <mat-form-field [ngClass]="{'disabledButton': class==true}">
           <mat-label>Transformador</mat-label>
           <mat-select [(value)]="transfo" (selectionChange)="select(transfo)">
               <mat-option *ngFor="let g of comboTransfo" [value]="g" style="width:100%;">
                   {{g.value}}
               </mat-option>
           </mat-select>
       </mat-form-field>
   </mat-grid-tile>
   <mat-grid-tile [rowspan]="1" [colspan]="1">
       <button mat-fab color="primary" *ngIf="play" (click)="start()" >
           <mat-icon>play_arrow</mat-icon>
       </button>
       <button mat-fab color="primary" *ngIf="isPause" (click)="pause()" >
           <mat-icon>pause</mat-icon>
       </button>
       <button mat-fab color="primary" *ngIf="isStop" (click)="stop()" >
           <mat-icon>close</mat-icon>
       </button>
   </mat-grid-tile>
   <mat-grid-tile [rowspan]="1" [colspan]="1">     
       <mat-form-field [ngClass]="{'disabledButton': class==true}">
           <mat-label>Proceso</mat-label>
               <mat-select [(value)]="proceso">
               <mat-option *ngFor="let f of comboTipoEtapa" [value]="f" >
                   {{f.value}}
               </mat-option>
           </mat-select>
       </mat-form-field>
   </mat-grid-tile>
   <mat-grid-tile [rowspan]="1" [colspan]="1">
       <mat-card>
           <mat-card-header>
               <mat-card-title>Tiempo</mat-card-title>
           </mat-card-header>
           <mat-card-content>
               <div></div>
               <div>{{now}}</div>
               <div>{{contador.dias+ " dias " + +contador.horas + " Hs. "+ contador.minutos+ " min. " + contador.segundos+" seg."}}</div>
           </mat-card-content>
       </mat-card>
   </mat-grid-tile>
   <mat-grid-tile [rowspan]="1" [colspan]="1">
       <mat-form-field [ngClass]="{'disabledButton': class==true}">
       <mat-label>Empleado</mat-label>
           <mat-select [(value)]="empleado">
               <mat-option *ngFor="let g of comboEmpleados" [value]="g" >
                   {{g.value}}
               </mat-option>
           </mat-select>
       </mat-form-field>
   </mat-grid-tile>
</mat-grid-list>
<br>
<button mat-raised-button mat-fab color="primary" (click)="addProceso()" matTooltip="agregar proceso" >
   <mat-icon>add</mat-icon>
</button>

Это часть моей тс:

start(){

    if((this.proceso && this.empleado && this.transfo) != undefined){
      this.play=!this.play;
      this.isPause=!this.isPause;
      this.isStop=true;
      this.class=true;
      this.mensajeSnack=`Proceso iniciado`
      this.openSnackBar(this.mensajeSnack);
      this.id=setInterval(()=>{

        this.contador=this.contadorPausado;
        if(this.play==false){
          this.contador.segundos++;
          if(this.contador.segundos>60){
            this.contador.segundos=0;
            this.contador.minutos++;
          }
          if(this.contador.minutos>60){
            this.contador.segundos=0;
            this.contador.minutos=0;
            this.contador.horas++;
          }
          if(this.contador.horas>24){
            this.contador.segundos=0;
            this.contador.minutos=0;
            this.contador.horas=0;
            this.contador.dias++;
          }
        }
      },1000)

      if(this.comienzo==true){
        this.getFechaInicio=new Date();
        this.dataEtapa=new Etapa();
        this.dataEtapa.idTipoEtapa=this.proceso.id;
        this.dataEtapa.idEmpleado=this.empleado.id;
        this.dataEtapa.idTransfo=this.transfo.id;
        this.dataEtapa.dateIni=this.getFechaInicio;

        this.etapaService.addEtapa(this.dataEtapa).subscribe(
          (res) => {
            console.log(res.idEtapa);
            let idEtapa=res.idEtapa;
            this.dataEtapa.idEtapa=idEtapa;
                this.isLoadingResults = false;
          },
          err => {
            console.log(err);
            this.isLoadingResults = false;
          }
        );

        this.comienzo=false;

      }

    }
}

addProceso(){

  }