Accessing a directive function from a component page


#1

Hi,
I’m VERY new to Ionic and haven’t used JS in years, so please forgive my ignorance… Your help over a current hurdle will be much appreciated.
I have a listVIew in a page where I’m trying to format a date/time for each item where the format is sensitive to the current time. So, for instance - as with email systems - if the item is timed within the past few minutes, it’s “time” is stated as “Now” whereas it is today, it is formatted as the time, whilst it is older, its format changes to the date (with no mention of the time). I have written a function that I’ll be wanting to call from several listView’s located in several different pages, so I gather that it could be best to set this up as a ‘directive’.
Thus I have set up the following…
import { Directive } from ‘@angular/core’;
import * as moment from ‘moment’;

@Directive({
selector: ‘[refresh-dates]’,
host: {
‘(ionScroll)’: ‘displayDate($dateStamp)’
}
})
export class RefreshDatesDirective {

dateStamp: any;

constructor() {
console.log(‘Hello RefreshDatesDirective Directive’);
}

displayDate(dateStamp: any) : string {
// if the item is datestamped as having occured some time in the future
if(this.dateStamp > moment()) {
return “Error”;
// if the item is datestamped within the past 5 mins
} else if(this.dateStamp > moment().subtract(5, ‘minutes’)) {
return this.dateStamp.fromNow(); // else “Now”?
// else if datestamped today
} else if(this.dateStamp > moment({hour: 0, minute: 0, seconds: 0})) {
return this.dateStamp.format(‘LT’); // “3:10 AM”
// else if datestamped yesterday
} else if(this.dateStamp > moment({hour: 0, minute: 0, seconds: 0}).subtract(‘days’, 1)) {
return “Yesterday”;
// else if datestamped this past week
} else if(this.dateStamp > moment().subtract(‘days’, 7)) {
return this.dateStamp.format(‘ddd, LT’); // “Thurs, 3:10 AM”
// else if datestamped this year
} else if(this.dateStamp.format(‘YY’) == moment().format(‘YY’)) {
return this.dateStamp.format(‘Do MMMM’); // “4th July”
} // else the item is datestamped as not having occurred this year
return this.dateStamp.format(‘Do MMMM YYYY’); // “4th July 2017” */
}
}

I’ve also added the following import into app.module.ts
import { RefreshDatesDirective } from ‘…/directives/refresh-dates/refresh-dates’;

@NgModule({
declarations: [
MyApp,
RefreshDatesDirective
],

In my page, I’ve made ion-content reference the directive

…and have then tried calling displayDates() by way of {{displayDate(item.dated)}} but how do I get it to refer / connect to the directive?

TIA.


#2

I think this sort of task is generally done with pipes instead, and fellow forum poster @AaronSterling has in fact written a set of them that includes a timeago pipe that would seem to (a) do exactly what you are trying to with but one line of code on your part and (b) be based on a much lighter library than moment, so it will be lighter on your app binary size and more performant.


#3

Thanks so much for your help. That looks to be a much better direction to pursue… I’ll give it a go.