How to use angular2 built-in date pipe in services and directives script files

Chen Dachao picture Chen Dachao · Dec 22, 2016 · Viewed 45.4k times · Source

I need to use angular2's date pipe in services and directives script files(not only in HTML).

Does anyone have ideas?

Can't upload code cos some policy restrictions, sorry about that.

Answer

Alexander Leonov picture Alexander Leonov · Dec 22, 2016

Since CommonModule does not export it as a provider you'll have to do it yourself. This is not very complicated.

1) Import DatePipe:

import { DatePipe } from '@angular/common';

2) Include DatePipe in your module's providers:

NgModule({
  providers: [DatePipe]
})
export class AppModule {
}

or component's providers:

@Component({
  selector: 'home',
  styleUrls: ['./home.component.css'],
  templateUrl: './home.component.html',
  providers: [DatePipe]
})
export class HomeComponent {
...

3) Inject it into your component's constructor like any other service:

constructor(private datePipe: DatePipe) {
}

4) Use it:

ngOnInit() {
    this.time = this.datePipe.transform(new Date());
}