Using pipes for dates

Formatting the dates in the SPA

time-ago-pipe

Install time-ago-pipe for converting a date string into a time ago (eg: “an hour ago” or “5 days ago”).

Stop *ng serve**.

npm install time-ago-pipe --save

Open app.module.ts and add it to the declarations

...
import {TimeAgoPipe} from 'time-ago-pipe';
...
@NgModule({
    imports: [... etc ...],
    declarations: [..., TimeAgoPipe, ... ]
})

Start *ng serve**.

Formatting dates

Open member-detail.component.html and use the default angular date pipe for the Member since date and the timeAgo pipe for Last active

<div>
  <strong>Last active:</strong>
  <p>{{user.lastActive | timeAgo}}</p>
</div>
<div>
  <strong>Member since:</strong>
  <p>{{user.created | date:'mediumDate'}}</p>
</div>

Make the same adjustments in member-edit.component.html

<div>
  <strong>Last active:</strong>
  <p>{{user.lastActive | timeAgo}}</p>
</div>
<div>
  <strong>Member since:</strong>
  <p>{{user.created | date:'mediumDate'}}</p>
</div>