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.

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

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.

  • 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 Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.