Angular Tutorial For Beginners – Part 7 : Pipes

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

Part 1 of this series discussed how to get started with Angular.

Part 2 discussed about the basic tenets of Angular Modules, Components and Directives.

Part 3 discussed data binding.

Part 4 discussed interfaces

Part 5 discussed how we can use services in angular.

Part 6 discussed Observables & Http requests.

This part of the angular tutorial discusses how we can transform our output using Pipes.

Pipes transform your data in the format that you want. For. e.g. 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 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 instead 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

 
    Uppercase Pipe : {{title | uppercase}}

    Lowercase Pipe : {{title | lowercase}}

    Currency Pipe : {{1234.56 | currency:"USD"}}
   
    Json Pipe : {{ jsonval | json }}

    Percent Pipe : {{00.54565 | percent}}

    Slice Pipe : {{days | slice:2:4}}

    Date Pipe : {{birthdate | date}}

    Date Pipe : {{birthdate | date:'fullDate'}}

The output will be displayed as follows:

Upper Case/Lowercase pipes:

The title above will be displayed in upper & 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 percent.

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

Parameterised Pipes:

We can also add parameters to 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 & impure. 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 performance.

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:

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.

Contents of the Angular tutorial for Beginners series:

Part 1: Getting Started

Part 2: Modules, Components & Directives in Angular.

Part 3: Data binding in angular.

Part 4 : Interfaces

Part 5: Services in Angular

Part 6: Http Requests with Observables.