Creating Pipes are done using angular-cli. To do that, let’s open our integrated terminal.


  • Go to View>Integrated Terminal
  • Or use the shortcut key combination shown

In the terminal, type the command ng g pipe [pipeName].


Open the date-formatter.pipe.ts file and it will look like this.


  • All the needed parts of a pipe like imports, decorator and export class is already generated.

Now, lets us our pipe to show an user-friendly date and time. Go app.component.ts and create a date variable.


Add this date variable to the file app.component.html.



Go back to your browser and date is now set. This may seem good enough but our goal is to make it user-friendly. This is where Pipes come into the picture. Let’s format the date using the pipe we created.



  • To add the pipe use the character “|” and set the date’s attributes as shown.
  • dd/mmm/yyyy is for the day, month and year hh:mm is for the hours and minutes and a stands for am/pm.



Save your work and go back to your browser.


Congratulations! You’ve now successfully added a pipe to your date.

On the next article, we will discuss “Built-in Directives: *ngFor”.

$100,000 is the average annual salary of talented software developers and your chances of getting this salary get better by learning Angular 2 today!

Sign up now and make the first step towards upgrading your skill set.

PLUS: Get up to 75% OFF our Angular 2 course in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.