Using Angular Pipes in Components or Services

In this guide let us learn how to use Angular Pipes in components & Services. We usually use Angular Pipes in the template. But a pipe is nothing but a class with a method transform. Whether it is a built-in pipe or custom pipe, we can easily use it in an angular component or service.

Using Pipes in Components & Services

Using pipes in your code involves three simple steps

  1. Import the pipe in Module
  2. Inject pipe in the constructor
  3. Use the transform method of the pipe


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Using Date pipe in Components & Services

First import the DatePipe from @angular/common. Add it in the Angular Provider metadata providers: [ DatePipe ],.

Open the app.component.html and inject the DatePipe in the constructor.

You can use it in component as shown below.

The transform method accepts the date as the first argument. You can supply additional Parameters to DatePipe like formattimezone & locale.

The complete component code is as below.

References

  1. Transforming Data Using Pipes

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top