Custom angular2 date format pipe that uses translations

Question

first, this is what I would like to accomplish:

Let's say I have a model for a posting that contains a js Date object. Now, I would like to render the date in a custom, human readable format that does not show a date and time, but rather an offset from now (i.e. "just now", "about one hour ago", "about two hours ago" etc.).

I am new to both, TypeScript and angular2, but from what I read so far, the most elegant approach would be to use a custom pipe like that:

@Pipe({name: 'hrTime'})
export class HrTimePipe implements PipeTransform {

    constructor(private translate: TranslateService) {

    }

    transform(val: Date): string {

        // Roughly check if that date is about one hour ago
        let now: Date = new Date();
        now.setMinutes(now.getMinutes() - 90);
        if (val > now) {
            return this.translate.instant("about_1_h_ago");
        }
    }
}

The problem with this approach is that TranslateService's instant() method doesn't make sure the translation file is loaded at the time this pipe is constructed or used. Therefore, my custom pipe currently just returns my translation key (since instant() doesn't find my translation).

For larger timegaps (i.e. more than a day ago), my pipe should internally just use the date format pipe, so returning a translation key that has to be piped into translate isn't really an option.

Do you have any suggestions? Is using a custom pipe the right approach for what I would like to accomplish?

Thanks!

You can use the APP_INITIALIZER opaque token to provide the translations on app start. Look at [this](https://gist.github.com/M4R1KU/20359bd6bebfe0a9b0107d82ed729fbc) gist of mine. — M4R1KU, Mar 08 '17 at 11:21

score 0 · Answer 1 · answered Mar 08 '17 at 11:24

0

You could make it into an impure pipe and return an Observable. That way you can chain your pipe to the async pipe and have it work seamlessly.

That way you'd have three scenarios i think: - the timegap is large: resolve with the date immediately - the timegap is small and the translations have been loaded already: translate and resolve immediately - the timegap is small and the translations are not ready yet: wait for the translations file to load and then resolve with the proper translation

answered Mar 08 '17 at 11:24

alebianco

2,475
18
25

I will also try this approach, but as far as I understood impure pipes should be avoided (especially in something like a list of postings) for performance reasons? – C. Doe Mar 08 '17 at 11:50
yes, the impure pipe might be called more often (on every component change detection) so there's more chance of a performance impact. You would have to evaluate how heavy the transformation is and how many times will be called on average. I wouldn't avoid it by default tho, don't ignore the tools you have ... – alebianco Mar 08 '17 at 12:54

score 0 · Accepted Answer · answered Mar 08 '17 at 11:39

0

If you dont care about have a external dependencie, why dont use the moment pipes, you have this implement in angular 2 https://github.com/urish/angular2-moment

answered Mar 08 '17 at 11:39

silvelo

377
1
7

Custom angular2 date format pipe that uses translations

2 Answers2