Pipe tutorial for Angular 12; In this tutorial, we'll learn about Angular's default and custom pipes. Angular comes with a plethora of built-in Pipes that can help you solve a variety of programming issues while designing a single-page web application.

We'll also learn how to build custom Angular Pipe from the ground up. Let's get started without further hesitation:

Angular 13 Pipe Example

  • Working with Angular Pipes
  • Angular Built-in Pipes
  • Creating Custom Pipe in Angular

Getting Started

Pipes are incredibly important when it comes to managing data within interpolation " | ", and we'll talk about them in Angular. Pipes were once known as filters in Angular, but they are now known as Pipes.

The letter | can be used to alter data. The syntax for the same can be found below.

{{ i will become uppercase one day | uppercase }}

Dates, arrays, texts, and integers are all acceptable inputs for pipes. | is used to separate inputs. Before being shown in the browser, the inputs will be transformed into the desired format.

We'll take a look at a few pipe-related instances.

We're attempting to show the given text in uppercase in the given example. You'll be able to do that with the use of pipes, as demonstrated below ?

The convertText variable is defined in the app.component.ts file -

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  convertText: string = "I Am Being Managed By Pipes";
}

The following code section can be found in the app.component.html file.

app.component.html

<div style="text-align:center">
  <img width="230" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <div style="padding-top: 30px">
    {{convertText | lowercase}}
  </div>
  <div style="padding-top: 30px">
    {{convertText | uppercase}}
  </div>
</div>

Angular Built-in Pipes

Angular Pipes allow you to rapidly recreate data in your Angular app. Angular has a built-in Pipes API that allows you to quickly change your data. You may also use it to make custom Pipes in your app. Let's take a look at some of the most helpful Angular Pipes.

Built-in Angular Pipes

  • Async Pipe
  • Currency Pipe
  • Date Pipe
  • Slice Pipe
  • Decimal Pipe
  • Json Pipe
  • Percent Pipe
  • LowerCase Pipe
  • UpperCase Pipe

How to Use Built-in Pipes in Angular 13

Let's see how we may make advantage of the built-in Angular pipes.

1. Async Pipe

When obtaining data in the form of observables, the Async pipe is regarded the best technique. The async pipe automatically subscribes to an Observable/Promise and returns the values delivered.

<ul>
  <li *ngFor="let users of Users | async">
    {{ users.name }}
  </li>
</ul>

 

2. Currency Pipe

The angled currency pipe allows you to convert numbers between different currencies.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
      <h3> Currency Pipe</h3>
      <p>{{ itemPrice | currency:'USD':true }}</p>      
      <p>{{ itemPrice | currency:'EUR':true}}</p>
      <p>{{ itemPrice | currency:'INR' }}</p>
    </div>
    `
})
export class AppComponent {
  itemPrice: number = 5.50;
}

 

3. Date Pipe

In Angular, the date pipe is used to format the Date.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
      <h3>Date Pipe</h3>
      <p>{{ currentDate | date:'fullDate' }}<p>      
      <p>{{ numDateFormat | date:'medium' }}<p>
      <p>{{ getYear | date:'yy' }}<p>
      <p>{{ getTime | date:'Hm' }}<p>
    </div>
    `
})
export class AppComponent {
    currentDate = Date.now();
    numDateFormat = 1478496544151;
    getYear = 'Tue Dec 12 2018 11:20:18 GMT+0530';
    getTime = 'Wed Jan 20 2019 12:20:18 GMT+0530';
}

 

4. Slice Pipe

In Angular, the Slice pipe API creates a subset list or string.

<ul>
  <li *ngFor="let users of Users | slice:2">
    {{ users }}
  </li>
</ul>

 

5. Decimal Pipe

In Angular, the Decimal pipe is used to format decimal numbers. CommonModule in Angular has issues with the Decimal Pipe API.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>Decimal Pipe</h3>
	      <p> {{myNum1 | number}} </p>
        <p> {{myNum2 | number}} </p>
    </div>
    `
})
export class AppComponent {
    myNum1: number = 7.4364646;
    myNum2: number = 0.9;
}

 

6. Json Pipe

The JSON pipe API allows an Angular app to expose an object as a JSON string. Behind the scenes, it complements the JSON.stringify function.

{{ objectName | json }}

 

7. Percent Pipe

In Angular, the Percent pipe API converts an integer to its percentage value.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>LowerCase & UpperCase Pipe</h3>
        <!--output '35%'-->
        <p>A: {{numA | percent}}</p>
    
        <!--output '0,245.950%'-->
        <p>B: {{numB | percent:'4.3-5'}}</p>
    </div>
    `
})
export class AppComponent {
  numA: number = 0.349;
  numB: number = 2.4595;
}

 

8. LowerCase & UpperCase Pipe

In an Angular app, lowercase or uppercase pipes help format text to lower or upper case.

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div style="text-align:center">
        <h3>LowerCase & UpperCase Pipe</h3>
	      <p> {{convertText | lowercase}} </p>
        <p> {{convertText | uppercase}}  </p>
    </div>
    `
})
export class AppComponent {
  convertText: string = "I Am Being Managed By Pipes";
}

How to Create Custom Pipe in Angular 13

Let's look at how we can make a custom pipe now. Run the following command in Angular CLI to construct a custom pipe to count words:

ng g pipe wordcount

After running the command in Angular CLI, this is how it will look.

ng g pipe wordcount
# CREATE src/app/wordcount.pipe.spec.ts (199 bytes)
# CREATE src/app/wordcount.pipe.ts (207 bytes)
# UPDATE src/app/app.module.ts (433 bytes)

This command will automatically generate the files wordcount.pipe.ts and wordcount.pipe.spec.ts, as well as update the app.module.ts file.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Custom Pipe imported here by Angular CLI
import { WordcountPipe } from './wordcount.pipe';

@NgModule({
  declarations: [
    AppComponent,
    WordcountPipe  // Wordcount pipe
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, utilizing the PIPE API service, let's construct a logic for word counting in a string in Angular.

Use the code below to open the wordcount.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'wordcount'
})
export class WordcountPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return value.trim().split(/\s+/).length;
  }
}

app.component.ts

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

// Usage of wordcount pipe within interpolation
@Component({
selector: 'app-root',
template: `
<div style="text-align:center">
  <img width="200" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <p> Word Counter Pipe in action below</p>
  <h1>{{ customText | wordcount }}</h1>
</div>
`
})
export class AppComponent {
   customText: string = "Java is to JavaScript what car is to Carpet.";
}

I hope you will like the content and it will help you to learn How to Create Custom Pipe in Angular 13 Application
If you like this content, do share.


Recommended Posts

View All

Angular 13 Firebase - Create a user with an Email address and Password


We&amp;#039;ll show you how to use the Firebase database to create a user with an email and password in the Angular 13 frontend framework.

Angular 13 Firebase Send Mail Example


Learn how to send a verification email to a new user in Angular, as well as how to prohibit users from accessing their accounts until the email has be...

Defining Metadata with a Decorator in Angular


Learn how to define metadata with a decorator in Angular. Our comprehensive guide will teach you how to simplify your code and enhance its performance...

What are the key components of Angular?


Angular is a powerful JavaScript framework for building web applications. Discover its key components and how they work together in this guide.

Advanced Techniques for Optimizing Angular Performance


Learn advanced techniques for optimizing Angular performance, including lazy loading, AOT compilation, change detection strategies, caching strategies...