Working with Pipes in Angular

In this short tutorial we look at working with pipes in angular. Pipes allow us to transform data. So I have some examples below of using pipes and the different default pipes available. You can also create custom pipes but I’m not going so far. This tutorial continues my dive into angular as I continue to explore the framework.

Continuing using our previous template we want to show the date when the current form is being implemented. To do this we add a date to our component class. The new variable we added is called createdDate.

export class AppComponent {
  title = 'Hello World';
  name = 'Wynton Franklin';
  description = 'This is a description';
  prof = '';
  terms = true;
  cost = 1.00;
  createdDate = new Date();
}

In our app.component.html we add our html to show the date. Very simple stuff.

<p&gt;Date Created:  {{ createdDate }}</p&gt;

The result is shown below. You can see we get the full date. We don’t want this we want to format the date.

To format the date we use pipes. Which is really just the | character.

<p&gt;Date Created:  {{ createdDate | date:"MM/dd/yy"}}</p&gt;

In the code above we add the date pipe with some parameters which determine how the date is displayed. This is great! Now the output we get is formatted as show below.

We could change the format to a more common date format year/month/day. All we have to do is change the parameters on the pipe.

<p&gt;Date Created:  {{ createdDate | date:"yyyy/MM/dd"}}</p&gt;

The results we get are

Lets try another type of pipe. We are going to make the login user totally upper case. To do this we just add the uppercase pipe in our html.

<p&gt;Login User : {{ name | uppercase }}</p&gt;

And just like that we have an uppercase login user.

We can chain pipes if we need to. In our next example we use the slice pipe and chain it to the uppercase pipe.

<p&gt;Login User : {{ name | slice:0:6 | uppercase }}</p&gt;

Some other cool pipes include

• number ( Decimal pipe) – https://angular.io/api/common/DecimalPipe
• currency – https://angular.io/api/common/CurrencyPipe
• percent
• slice
• json – https://angular.io/api/common/JsonPipe
• lowercase
• date – https://angular.io/api/common/DatePipe

Having fun trying them out and the different options they include.