Angular Tutorial For Beginners - Part Seven - Using Pipes In Angular

This is part 7 of the Angular Tutorial for Beginners series.

• Part 1: Getting started with Angular
• Part 2: Modules, Components & Directives in Angular
• Part 3: Data binding in angular
• Par 4: Interfaces
• Part 5: Services in Angular
• Part 6 discussed Observables & Http requests.

This part of the Angular tutorials series discusses how we can transform our output using Pipes.

 

Pipes transform your data into a format of your choice. For example, we can use Pipes if we want our date in some particular date format.

 

Angular provides some built-in pipe methods. We can also create our own custom pipes.

 

Let’s have a look at some of the built-in pipes in Angular.

 

Built-in Pipes

 

Async Pipe

 

Remember how we had subscribed to an observable to get the data from HTTP GET. An Async pipe can also be used for the same. An async pipe subscribes to an observable and returns the latest value it has emitted.

 

Let’s modify our code to use async instead of subscribe method.

 

We will comment out the subscribe method and change employees to be a type of Observable of IEmployee in employee.component.ts.

 

 

 

Then, in the employee.component.html file, we will modify ngIf and ngFor to use the async pipe.

 

 

 

Our output will be the same as before which means we have successfully used the async pipe in place of the Subscribe method.

 

 

 

Now, let’s use the below code to learn about some other pipes.

 

We will write the following code in app.component.ts.

export class AppComponent {
   title = 'Welcome';
   birthday = new Date(1990, 5, 10);
   jsonval = {name:'John', age:'22', address:{a1:'Mumbai', a2:'Maharashtra'}};
   days = ["Mon", "Tues", "Wed", "Thurs", "Fri", "Sat","Sun"];
}

 

 

And the following code in app.component.html

<div style="text-align:center;border:1px solid blue">
    <b>Uppercase Pipe</b> : {{title | uppercase}}<br>
    <b>Lowercase Pipe</b> : {{title | lowercase}}<br>
    <b>Currency Pipe</b> : {{1234.56 | currency:"USD"}}<br>
    <b>Json Pipe</b> : {{ jsonval | json }}<br>
    <b>Percent Pipe</b> : {{00.54565 | percent}}<br>
    <b>Slice Pipe</b> : {{days | slice:2:4}}<br>
    <b>Date Pipe</b> : {{birthdate | date}}<br>
    <b>Date Pipe</b> : {{birthdate | date:'fullDate'}}<br>
</div>

 

 

The output will be displayed as below.

 

 

 

Upper Case/Lowercase pipes

 

The title above will be displayed in upper and lower case as below.

 

{{title | uppercase}} will be displayed as,

 

 

 

{{title | lowercase}} will be displayed as,

 

 

 
Currency Pipe

 

{{1234.56 | currency:”USD”}}

 

Displays the currency with the USD symbol as below.

 

 

 
JSON Pipe

 

Displays the data as JSON.

 
Percent Pipe

 

Displays the data as a percentage.

 

{{00.54565 | percent}} will be displayed as 55%.

 

Slice Pipe

 

Creates a new array or string containing a subset of the elements.

 

{{days | slice:2:4}} creates a subset of Wed & Thurs. ‘2’ denotes the start index. Indexing starts from ‘0’. 4 denotes the end index, but slice will display the elements before the end index. If you need more information on the slice pipe, this link from Angular is really helpful.

 

Date pipe

 

We will display the date as below.

 

{{birthdate | date}}

 

Displays the date in the following format.

 

 

 

Parameterized Pipes

 

We can also add parameters to a pipe as below. Here, ‘fullDate’ is a parameter.

 

My birthday is on {{ birthdate | date:”fullDate” }}

 

 

 

Chaining Pipes

 

We can also chain the pipes as below.

 

My birthday is on {{ birthdate | date:”fullDate”|uppercase }}

 

 

 

Pure & Impure Pipes

 

Pipes are classified as pure and impure also. If the pure flag is false, then the pipe is impure. This flag can be set when the pipe is created. More on this when we create a custom flag below.

 

The difference between the two is that pure pipes are executed only when there is a pure change, i.e., change to primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). By default, pipes are pure. An impure pipe is called for every change detection.

 

Impure pipes can degrade the performance of our Angular application.

 

Custom Pipes

 

Now, let’s create a custom pipe that will take in an input value, and change the ‘-‘ in the input to ‘/’.

 

Let’s create a new class hypenToSlash.pipe.ts.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'hyphenToSlash'})
export class HyphenSlashPipe implements PipeTransform {
  transform(inputString: string): string {
    inputString = inputString.replace('-','/');
    return inputString
  }
}

 

 

To implement the custom pipe, all we did was added an @Pipe directive and implemented the transform method of the PipeTransform interface.

 

Let’s import the pipe into app.module.ts as below.

 

 

 

Now, let’s use it. In the app.component.ts, we will use our custom pipe as below.

 

{{ pipeInput | hyphenToSlash }}

{{ "7-9" | hyphenToSlash }}

 

 

The output will be as below.

 

 

 

Note
You can modify the above pipe to be impure by setting an impure flag as below.

 

 

 

This concludes our article on using pipes in Angular. In the next article, we will learn about creating nested components in Angular. The official Angular website has some exciting documentation on pipes.

 

This article was originally published on my website taagung.