title: Angular/Typescript - Add different times together to retrieve total time taken
body: <p>I developed a basic tracker that retrieves the time taken on each and every page of my website. The part that provides the time taken on each page works perfectly, but now I'm trying to add the time taken on each page in order to generate a total time taken throughout the whole use of the website.</p>
  
  <p>tracker.service.ts - This retrieves the data</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { TrackerData } from '../modules/tracker-data';
  
  @Injectable({
    providedIn: 'root'
  })
  export class TrackerService {
    websiteData: TrackerData[] = [];
  
    public get count(): number
    {
      let count = 0;
      this.websiteData.forEach(d =&gt; count += d.clickCount);
      return count;
    }
  
    constructor() { }
  
    addTrackerData(trackerData: TrackerData): void {
      if (trackerData.url === undefined &amp;&amp; this.websiteData.length &gt; 0)
      {
        this.websiteData[this.websiteData.length - 1].clicks = trackerData.clicks;
        return;
      }
  
      this.websiteData.push(trackerData);
     }
  
     getData() {
        return this.websiteData;
     }
  }
  </code></pre>
  
  <p>summary.component.ts this retrieves the get data function from services in order to display the data</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TrackerService } from 'src/app/services/tracker.service';
  import { TrackerData } from 'src/app/modules/tracker-data';
  
  @Component({
    selector: 'app-summary',
    templateUrl: './summary.component.html',
    styleUrls: ['./summary.component.scss']
  })
  export class SummaryComponent implements OnInit {
  
    public websiteData: TrackerData[] = [];
  
    public clickCount = 0;
  
    constructor(
      private trackerService: TrackerService,
    ) { }
  
    ngOnInit(): void
    {
      this.websiteData = this.trackerService.getData();
      this.clickCount = this.trackerService.count;
    }
  }
  </code></pre>
  
  <p>summary.component.html - Here I show the information.</p>
  
  <pre><code>&lt;h3&gt;Task Summary&lt;/h3&gt;
  
  &lt;div class="summary"&gt;
    &lt;p&gt;&lt;span&gt;{{ clickCount }}&lt;/span&gt;Number of clicks&lt;/p&gt;
    &lt;p&gt;&lt;span&gt;TOTAL TIME TAKEN&lt;/span&gt;&lt;/p&gt; &lt;!--  This is where I want to show the total time taken --&gt;
  &lt;/div&gt;
  
  
  &lt;div *ngFor="let trackerData of websiteData"&gt; 
      &lt;p&gt;Page: {{ trackerData.url }}&lt;/p&gt;
      &lt;p&gt;Entry: {{ trackerData.entry | date: 'h:mm:ss:ms a' }}&lt;/p&gt;
      &lt;p&gt;Exit: {{ trackerData.exit | date: 'h:mm:ss:ms a' }}&lt;/p&gt;
      &lt;p&gt;Total time: {{ trackerData.exit - trackerData.entry | date: 'ss:ms' }}&lt;/p&gt; &lt;!-- This is what I want to add in order to retrieve the total time taken above --&gt; 
  
      &lt;p&gt;Clicks: {{ trackerData.clickCount }}&lt;/p&gt;
      &lt;ul&gt;
          &lt;li *ngFor="let click of trackerData.clicks"&gt;{{ click }}&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>