Angular 8 pipe

In this tutorial, we will discuss about the pipe in Angular 8. Pipe are a great way to transform data. In Angular 1, filters are used which are later called Pipes onward Angular 2. In Angular 8, it is known as pipe and used to transform data. It is denoted by symbol |

Syntax

   {{title | uppercase}}

Pipe takes integers, strings, arrays, and date as input separated with |. It transforms the data in the format as required and displays the same in the browser.

Let’s see an example using pipes. Here, we display the title text in upper and lower case by using pipes.

Define a variable named “title” in component.ts file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'pipe example';

  constructor() { }

  ngOnInit() {
  }

}

Use the pipe symbol in component.html file:

<h1>  
   {{ title | uppercase }} <br/></h1>  
<h1>  
  {{ title | lowercase }} <br/></h1>

Output

Run ng serve and see the result. You will see the following result.

Here, you can see that pipes have changed the tittle in upper and lowercase.

Angular 8 Built-in Pipes

Angular 8 provides some built-in Pipes

Lowercase pipe
Uppercase pipe
Date pipe
Currency pipe
Json pipe
Percent pipe
Decimal pipe
Slice pipe

You have seen the lowercasepipe and uppercasepipe examples. Now, let’s take some examples to see how the other pipes work.

Example

Define the required variables in component.ts file.

component.ts file:

import { Component } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  

export class AppComponent implements OnInit {

  title = 'pipe example';  
  todaydate = new Date();  
  jsonval = {name: 'Shukla', age: '31', address:{a1: 'Indore', a2: 'India'}};  
  months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',  
    'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];  

  constructor() { }

  ngOnInit() {
  }

}

Use the different built-in pipe symbols in component.html file:

component.html file:

<div class="container">     
    <div class="row mt-2">
        <div class="col-md-12">
        <p>Uppercase Pipe: <b>{{title | uppercase}}</b></p>
        <p>Lowercase Pipe: <b>{{title | lowercase}}</b></p>        
        <p>Currency Pipe: <b>{{6589.23 | currency:"USD"}}</b></p>        
        <p>Date Pipe: <b>{{todaydate | date:'d/M/y'}}</b></p>        
        <p>Date Pipe: <b>{{todaydate | date:'shortTime'}}</b></p>
        <p>
          Decimal Pipe: <b>{{ 948.98685814961 | number: '3.4-4' }}</b>
          <small>// 3 is for main integer, 4 -4 are for integers to be displayed. </small></p>
        
        <p>Json Pipe: <b>{{ jsonval | json }}</b></p>
        <p>Percent Pipe: <b>{{00.6865 | percent}}</b></p>
        <p>
          Slice Pipe: <b>{{months | slice:2:6}}</b>
          <small>//here 2 and 6 refers to the start and the end index  </small>
        </p>
      </div>
    </div>  
</div>

Preview

Running Demo

How to create a custom pipe?

To create a custom pipe, create a new ts file and use the code according to the work you have to do. You have to import Pipe, PipeTransform from Angular/Core. Let’s create a ucfirst custom pipe.

Run below command to create pipe

ng g pipe ucfirst

This will create a new file called ucfirst.pipe.ts. Open ucfirst.pipe.ts file and put the below code

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

@Pipe({
  name: 'ucfirst'
})
export class UcfirstPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.charAt(0).toUpperCase() + value.toLowerCase().slice(1);
  }
}

Now, use ucfirst pipe in component.html file.

component.html file:

<p>First letter capital Pipe: <b>{{title | ucfirst}}</b></p>

Preview

Running Demo

If you have any questions or thoughts to share, use the comment form below to reach us.