added moments library with i18n

package.json

@@ -37,10 +37,10 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/common": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
     "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",
@@ -48,6 +48,8 @@
     "@angular/router": "^6.0.0",
     "core-js": "^2.5.4",
     "d3": "^5.3.0",
+    "moment": "^2.22.2",
+    "ngx-moment": "^3.1.0",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },

src/app/app.component.html

@@ -113,9 +113,6 @@
       <a href="#" *ngFor="let item of list.reverse(); let i = index" class="list-group-item d-flex flex-row " (click)="restoreGraph(item)">
         <span class="text-muted pr-3">#{{ list.length - i }}</span>
         <div class="d-flex flex-column">
-          <div>
-            {{ item.date | date:'HH:mm:ss' }} Uhr
-          </div>
           <div class="">
             <span class="badge badge-primary  mr-2">
               {{ item.config.nodes }} Knoten
@@ -124,6 +121,9 @@
               {{ item.config.spread }} Linien
             </span>
           </div>
+          <div>
+              {{ item.date | amTimeAgo }}
+            </div>
         </div>
       </a>
     </div>

src/app/app.component.ts

@@ -18,6 +18,9 @@ import { ConfigForm } from './forms/config.form';
 import { Component, OnInit, HostListener } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+// import { Moment } from 'moment';
+import * as moment from 'moment';
+import 'moment/min/locales';
 
 import { environment as env } from '../environments/environment';
 import { Param } from './models/param.model';
@@ -43,8 +46,10 @@ export class AppComponent implements OnInit {
 
   constructor(
     private canvasService: CanvasService,
-    private historyService: HistoryService
+    private historyService: HistoryService,
   ) {
+    moment.locale('de');
+
     this.config = env.formDefaults;
     this.configForm = ConfigForm;
     this.list = [];

src/app/app.module.ts

@@ -17,6 +17,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MomentModule } from 'ngx-moment';
 
 import { AppComponent } from './app.component';
 import { GraphsComponent } from './components/graphs.component';
@@ -34,6 +35,7 @@ import { HistoryService } from './services/history.service';
     BrowserModule,
     ReactiveFormsModule,
     FormsModule,
+    MomentModule,
   ],
   providers: [
     CanvasService,
@@ -41,4 +43,4 @@ import { HistoryService } from './services/history.service';
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}