How to implement moment.js as a pipe in an Angular

Question

I would like to implement moment.js library inside an angular2 project i order to convert a UTC time to a certain time zone Europe/london and that using moment and [moment timezone] 1

So far, I have installed moment.js in my Angular2 project using the following command:

npm install moment --save

Here is my current code:

import { Component, Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'moment' })
class MomentPipe{
  transform(date, format) {
    return moment(date).format(format);
  }
}

The Html:

I received the time from the backend as an object

//time.bookingTime.iso == 2016-07-20T21:00:00.000Z

 {{time.bookingTime.iso | moment}}

It didn't work for me and I think that I have wrong implementation

Answer 1

Update: June 2018

Official Documentation about PIPES

To learn about Moment in Typescript and Moment Date Formats.

Example given below based on the Question here! Using PIPE technique we can use moment in Angular View as well (Date Formatting).

MomentPipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'dateFormat' })
export class MomentPipe implements PipeTransform {
    transform(value: Date | moment.Moment, dateFormat: string): any {
        return moment(value).format(dateFormat);
    }
}

You must include your pipe in the declarations array of the AppModule.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MomentPipe } from './momentPipe';

@NgModule({
  imports: [
    // Your Modules
  ],
  declarations: [
    AppComponent,
    // Your Components
    MomentPipe
  ],
  providers: [
    // Your Providers
  ]
})
export class AppModule { }

Use it in your View/Html like below.,

{{ createdDate | dateFormat: 'MMMM Do YYYY, h:mm:ss a'}}

Hope this helps.,

Answer 2

Try below

export class MomentPipe implements PipeTransform {
transform(date, format) {
    return moment(date).format(format);
}
}

Answer 3

When you need to use it, you have to specify it in the @component:

@Component({
    moduleId: module.id,
    templateUrl: './xyz.component.html',
    styleUrls: ['./xyz.component.css'],
    pipes: [MomentPipe],
    directives: [...]
})
public export ...

and use it in the html in this way:

{{now | momentPipe:'YYYY-MM-DD'}}

btw, this is my way to write the pipe:

import {Pipe, PipeTransform} from '@angular/core';
import * as moment from 'moment';

@Pipe({
    name: 'momentPipe'
})
export class MomentPipe implements PipeTransform {
    transform(value: Date|moment.Moment, ...args: any[]): any {
        let [format] = args;
        return moment(value).format(format);
    }
}