Human readable pipe using Moment.js

fastlane · Apr 17, 2018 · 417cd5f · 417cd5f
1 parent c74bd97
commit 417cd5f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,9 @@
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
+    "@types/moment": "^2.13.0",
     "core-js": "^2.4.1",
+    "ngx-moment": "^2.0.0-rc.0",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

diff --git a/web/app/app.module.ts b/web/app/app.module.ts
@@ -4,6 +4,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTableModule} from '@angular/material/table';
 import {BrowserModule} from '@angular/platform-browser';
+import {MomentModule} from 'ngx-moment';
 
 import {AppRoutingModule} from './/app-routing.module';
 import {AppComponent} from './app.component';
@@ -20,6 +21,8 @@ import {DataService} from './services/data.service';
     MatCardModule,
     MatTableModule,
     MatIconModule,
+    /** Third-Party Module Imports */
+    MomentModule,
   ],
   providers: [DataService],
   bootstrap: [AppComponent]

diff --git a/web/app/dashboard/dashboard.component.html b/web/app/dashboard/dashboard.component.html
@@ -24,8 +24,7 @@
         <!-- Latest Build Column -->
         <ng-container matColumnDef="latestBuild">
           <mat-header-cell *matHeaderCellDef>Latest Build</mat-header-cell>
-          <!-- TODO: Pipe this into a relative time pipe -->
-          <mat-cell *matCellDef="let project">{{project.latestDate | date: 'fullDate'}}</mat-cell>
+          <mat-cell *matCellDef="let project">{{project.latestDate | amTimeAgo }}</mat-cell>
         </ng-container>
 
         <!-- TODO: Add Repo Column -->