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

by

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());
}

More Related Contents:

  1. @HostBinding and @HostListener: what do they do and what are they for?
  2. What is the lifecycle of a service in Angular 5
  3. Angular 2 – how round calculated number?
  4. Angular/RxJS When should I unsubscribe from `Subscription`
  5. Is it necessary to unsubscribe from observables created by Http methods?
  6. What is the equivalent of ngShow and ngHide in Angular 2+?
  7. How to iterate object keys using *ngFor
  8. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  9. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  10. Angular 2 Scroll to top on Route Change
  11. how to format date in Component of angular 5
  12. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  13. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  14. Hide/show individual items inside ngFor
  15. How to get angular2 [innerHtml] to work [duplicate]
  16. How to inject service into class (not component)
  17. Angular 2 ‘component’ is not a known element
  18. How to make a sequence of http requests in Angular 6 using RxJS
  19. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  20. How to clear template cache?
  21. When to use ‘npm start’ and when to use ‘ng serve’?
  22. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  23. Angular 5 Reactive Forms – Radio Button Group
  24. Use OpenLayers 4 with Angular 5
  25. Subscribing to a nested Observable
  26. How to get parameter on Angular2 route in Angular way?
  27. Ng serve throwing @angular/core/core has no exported member ‘eeFactoryDef’
  28. How to import a new font into a project – Angular 5
  29. How to receive blob responses using Angular’s 2+ @angular/http module?
  30. How to pass results between chained observables

Leave a Comment