Step by Step Use Custom Pipes in Angular

Step by Step Use Custom Pipes in Angular

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. A pipe takes in a value or values and then returns a value.

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. A pipe takes in a value or values and then returns a value.

The CurrencyPipe which transforms a given number into a currency string is a prime example of Angular pipe. The CurrencyPipe is one of several Angular pipes provided by the Angular framework directly out of the box. In addition to these built-in pipes, developers can create their own custom pipes. Being able to create custom pipes for your project is a useful tool to have in your developer toolbox.

In this tutorial, we will create custom pipes and use them to organize data. All of this will be done using a pipe Module that I will create and add to my project. Here are what I’m going to showcase:

This is image title

  1. A chart displaying random daily lunch expenses for 3 persons with data on the y-axes formatted in US dollars currency.

  2. A form displays a list of soccer player names in ascending order and a search input with a filter option.

    Prerequisites:

    Have previously worked with angular

    Understand the concept of Angular pipe

So, let's write some code and try to demonstrate how to use a couple of custom pipes:

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

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {

    transform(items: any[], text: string): any[] {

        if (!items) { return []; }

        if (!text) { return items; }

        text = text.toLowerCase();
        return items.filter(it => {
            return it.toLowerCase().includes(text);
        });
    }
}

filter.pipe.ts

Filter pipe

  • Filter pipe; takes an array as input and returns a subset of that array based on the term enter in a search input.
  • Sort\orderBy pipe; takes an array as input and returns a sorted subset of that array.
  • Size pipe that takes a number and returns its equivalent in ‘bytes’, ‘KB’, ‘MB’, ‘GB’, ‘TB’, ‘PB’ on a chart.
  • Capitalize pipe that capitalizes the first later of every word that’s longer than 2 characters
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'fileSize'
})
export class FileSizePipe implements PipeTransform {
    private units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];

    transform(bytes: number = 0, precision: number = 2): string {
        // tslint:disable-next-line:curly
        if (isNaN(parseFloat(String(bytes))) || !isFinite(bytes)) return '?';

        let unit = 0;

        while (bytes >= 1024) {
            bytes /= 1024;
            unit++;
        }

        return bytes.toFixed(+precision) + ' ' + this.units[unit];
    }
}

size.pipe.ts

Size pipe

It’s easy to create custom pipes to use in your templates to modify interpolated values. You don’t have to duplicate your code if you want to also use a pipe’s functionality in a component class. All you have to do really is inject the pipe like a service and then call its transform method.

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

@Pipe({
    name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
    transform(value: string, _args?: any): any {
        return value.split(' ').map(word => {
            return word.length > 2 ? word[0].toUpperCase() + word.substr(1) : word;
        }).join(' ');
    }
}

capitalize.ipe.ts

Capitalize pipe

I recently published How to Read Local JSON Files & Deploy an Angular App. I’m going to make changes on this project to demo pipe use in Angular. If you would like to follow along, simply clone it and run it locally:

git clone https://github.com/YannMjl/Ng-read-localJSON 
Cd Ng-read-localJSON
npm install
ng serve --open

I created a branch: ng_pipe, where I’m going to modify the app and demo pipe usage. You can go ahead and create your own branch.

git checkout -b "yourBranchName"
git branch -a

Now, for the purpose of this tutorial. I’m going to showcase how I use different pipes to filter, sort, format, and order data display on my application.

The first step is to properly add the pipes to your project folder.

  1. create pipe files; copy-paste the content of custom pipes I made or simply write your own custom pipe if you’re filling like giving it a try
import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';

@Pipe({
    name: 'orderBy',
    pure: false
})
export class OrderByPipe implements PipeTransform {

    transform(value: any[], order = '', column: string = ''): any[] {

        if (!value || order === '' || !order) {
            return value;
        } // no array

        if (!column || column === '') {
            return _.sortBy(value);
        } // sort 1d array

        if (value.length <= 1) {
            return value;
        } // array with only one item

        return _.orderBy(value, [column], [order]);
    }
}

orberby.pipe.ts

oberBy | Sort pipe

This is image title

VS Code IDE Screenshot

  1. I saved my custom pipes in a shared folder inside of the app project folder:

Pipes are used for formatting the data before displaying it in the View. A pipe is used by using |. This symbol is called a Pipe Operator.

The next step is properly added your pipes to your module’s declarations. Here is how i added those custom pipes on my module’s declaration:

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

import { FileSizePipe } from './shared/size.pipe';
import { FilterPipe } from './shared/filter.pipe';
import { OrderByPipe } from './shared/orderBy.pipe';
import { CapitalizePipe } from './shared/capitalize.pipe';
import { CustomCurrencyPipe } from './shared/mycurrency.pipe';

@NgModule({
  declarations: [
    AppComponent,
    OrderByPipe,
    FileSizePipe,
    CapitalizePipe,
    CustomCurrencyPipe,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MDBBootstrapModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.modules.ts

Now, after you have successfully added your pipes to your module’s declarations, you can inject it in a component’s class like this:

// ...
import { CurrencyPipe } from '@angular/common';
import { FileSizePipe } from './shared/size.pipe';
import { FilterPipe } from './shared/filter.pipe.js';
import { OrderByPipe } from './shared/orderBy.pipe.js';
import { CapitalizePipe } from './shared/capitalize.pipe';
import { CustomCurrencyPipe } from './shared/mycurrency.pipe.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
        FileSizePipe, CapitalizePipe, OrderByPipe,
        FilterPipe, CurrencyPipe, CustomCurrencyPipe
  ]
})
export class AppComponent implements OnInit {

  constructor(
        private currency: CurrencyPipe,
        private datasize: FileSizePipe,
        private capitalize: CapitalizePipe,
        private mycurency: CustomCurrencyPipe 
    ) {}

    ngOnInit() {
        // ...
    }
}

app.component.ts

The last step is simply using your pipe either in typescript or in your app HTML component during data display. Here is an example of how I use the Capitalize pipe in TypeScript to capitalize the first letter of every word with more than 2 characters of the application title:

ngOnInit() {
  // let use capitlaize pipe on the title
  this.title = this.capitalize.transform(this.title);
}

Here is an example of how I use the filter or orderBy pipe in the app HTML component:

// add filter option in the search input
<input type="text" name="search" placeholder="Search..." [(ngModel)]="text">
// add filter and orderby pipe in the list of names display
<li class="mx-2" *ngFor="let name of Names | filter : text | orderBy: 'asc'">
  {{name}}
</li>

You can have a look at my demo here: https://ng-pipe-demo.netlify.com/

angular javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.