Creating and Using Pipes [Angular Tutorial]

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

creating pipes

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

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

creating pipes

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

creating pipes

  • 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.

creating pipes

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

creating pipes

creating pipes

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.

creating pipes

  • 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.

creating pipes

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

Subscribe Now and Get our React Native Course for FREE!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get FREE access to our React Native course, coming soon on Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.