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

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

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

22 Comments

  1. Caleb said:

    Very great post. I simply stumbled upon your blog and wanted to mention that I’ve really loved browsing your weblog posts.
    In any case I will be subscribing in your rss feed and I hope you write
    again soon!

    Look at my web-site :: cheap flights

    January 31, 2021
    Reply
  2. Columbus said:

    Very good information. Lucky me I recently found your site by chance (stumbleupon).
    I’ve bookmarked it for later!

    my web blog … cheap flights

    February 1, 2021
    Reply
  3. Hosea said:

    I am regular visitor, how are you everybody? This
    piece of writing posted at this website is in fact nice.

    Here is my blog post; cheap flights (http://tinyurl.com/y2rzk76k)

    February 2, 2021
    Reply
  4. Melanie said:

    I’m not that much of a internet reader to be honest but your sites really nice,
    keep it up! I’ll go ahead and bookmark your site
    to come back down the road. Many thanks

    Here is my web-site: cheap flights

    February 2, 2021
    Reply
  5. Jude said:

    Hey! I know this is kinda off topic but I was wondering which blog platform are you using
    for this website? I’m getting tired of WordPress because I’ve had problems with hackers and
    I’m looking at alternatives for another platform. I
    would be great if you could point me in the
    direction of a good platform.

    Feel free to surf to my site: cheap flights – tinyurl.com,

    February 3, 2021
    Reply
  6. Kbcxbype said:

    canada pharmacy online reviews muscle relaxant pharmacy price comparison

    February 3, 2021
    Reply
  7. NncsGeste said:

    buying viagra with paypal viagra gum which one is better viagra cialis or laverta

    February 4, 2021
    Reply
  8. Fqhhguany said:

    international drug mart canadian pharmacy online store medical pharmacies cialis professional

    February 5, 2021
    Reply
  9. Lbsxguany said:

    canadian discount pharmacy viagra online best non prescription online pharmacies

    February 6, 2021
    Reply
  10. Ofelia said:

    Greetings! I know this is kinda off topic but I was wondering if you knew where
    I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

    Here is my webpage – cheap flights, tinyurl.com,

    February 12, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *