Which is better pipe vs function (in component class) in component view (html) ?

Anil Kumar
4 min readSep 11, 2022

Pipe vs Function in html view …

We will start with example of cryptocurrency list in table view….price is coming in dollar (USD) so we will convert it to rupees INR.

  1. Created a table with Angular Material
  2. JSON of crypto currencies.
  3. In Price column two scenarios one with function and other with pipe same code in both pipe and function.
  4. Note For better understanding you should know the pipe and function direct used in html view.

TS FILE CODE

Interface and JSON DATA

export interface PeriodicElement {

name: string;

price: number;

symbol: string;

rank: number;

}

const ELEMENT_DATA: PeriodicElement[] = [

{rank: 1, name: ‘Bitcoin’, price: 19337.375464090503, symbol: ‘BTC’},

{rank: 2, name: ‘Ethereum’, price: 1330.0428261077752, symbol: ‘ETH’},

{rank: 3, name: ‘Tether’, price: 1.0000392813048584, symbol: ‘USDT’},

{rank: 4, name: ‘USD Coin’, price: 1.000062791820598, symbol: ‘USDC’},

{rank: 5, name: ‘BNB’, price: 283.23068073166854, symbol: ‘BNB’},

{rank: 6, name: ‘XRP’, price: 0.4750644406272424, symbol: ‘XRP’},

{rank: 7, name: ‘Binance USD’, price: 1.000064200254162, symbol: ‘BUSD’},

{rank: 8, name: ‘Cardano’, price: 0.43347946651645236, symbol: ‘ADA’},

{rank: 9, name: ‘Solana’, price: 33.09910000071954, symbol: ‘SOL’},

{rank: 10, name: ‘Dogecoin’, price: 20.1797, symbol: ‘DOGE’}

];

CLASS FILE..

import { AfterViewInit, ViewChild, Component, OnInit } from ‘@angular/core’;

import {MatPaginator} from ‘@angular/material/paginator’;

import {MatTableDataSource} from ‘@angular/material/table’;

@Component({

selector: ‘app-coins’,

templateUrl: ‘./coins.component.html’,

styleUrls: [‘./coins.component.scss’]

})

export class CoinsComponent implements AfterViewInit {

displayedColumns: string[] = [‘rank’, ‘name’, ‘price’, ‘priceInr’, ‘symbol’];

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor() { }

ngAfterViewInit() {

this.dataSource.paginator = this.paginator;

}

public convertToINR(amount:number){

console.log(‘convertToINR Function’)

return amount*70;

}

}

Now …you can see function convertToINR

We have assumed 1 USD = 70 INR.

public convertToINR(amount:number){

console.log(‘convertToINR Function’)

return amount*70;

}

Now Pipe code with same logic.

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

@Pipe({

name: ‘convertToInr’

})

export class ConvertToInrPipe implements PipeTransform {

transform(value: number, …args: unknown[]): number {

console.log(‘convertToINR pipe called’)

return value*70;

}

}

Now html code…with function 1.

<div class=”mat-elevation-z8">

<table mat-table [dataSource]=”dataSource”>

<! — Rank Column →

<ng-container matColumnDef=”rank”>

<th mat-header-cell *matHeaderCellDef> Rank. </th>

<td mat-cell *matCellDef=”let element”> {{element.rank}} </td>

</ng-container>

<! — Name Column →

<ng-container matColumnDef=”name”>

<th mat-header-cell *matHeaderCellDef> Name </th>

<td mat-cell *matCellDef=”let element”> {{element.name}} </td>

</ng-container>

<! — Price Column →

<ng-container matColumnDef=”price”>

<th mat-header-cell *matHeaderCellDef> Price USD </th>

<td mat-cell *matCellDef=”let element”> {{element.price}} </td>

</ng-container>

<ng-container matColumnDef=”priceInr”>

<th mat-header-cell *matHeaderCellDef> Price INR </th>

<td mat-cell *matCellDef=”let element”> {{ convertToINR(element.price)}} </td>

</ng-container>

<! — Symbol Column →

<ng-container matColumnDef=”symbol”>

<th mat-header-cell *matHeaderCellDef> Symbol </th>

<td mat-cell *matCellDef=”let element”> {{element.symbol}} </td>

</ng-container>

<tr mat-header-row *matHeaderRowDef=”displayedColumns”></tr>

<tr mat-row *matRowDef=”let row; columns: displayedColumns;”></tr>

</table>

<mat-paginator [pageSizeOptions]=”[5, 10, 20]”

showFirstLastButtons

aria-label=”Select page of periodic elements”>

</mat-paginator>

</div>

….

in console in print function multiple times ( 10 +5 +5 +5 = 25) even records are not changing….

Now If we go pipe..

<div class=”mat-elevation-z8">

<table mat-table [dataSource]=”dataSource”>

<! — Rank Column →

<ng-container matColumnDef=”rank”>

<th mat-header-cell *matHeaderCellDef> Rank. </th>

<td mat-cell *matCellDef=”let element”> {{element.rank}} </td>

</ng-container>

<! — Name Column →

<ng-container matColumnDef=”name”>

<th mat-header-cell *matHeaderCellDef> Name </th>

<td mat-cell *matCellDef=”let element”> {{element.name}} </td>

</ng-container>

<! — Price Column →

<ng-container matColumnDef=”price”>

<th mat-header-cell *matHeaderCellDef> Price USD </th>

<td mat-cell *matCellDef=”let element”> {{element.price}} </td>

</ng-container>

<ng-container matColumnDef=”priceInr”>

<th mat-header-cell *matHeaderCellDef> Price INR </th>

<td mat-cell *matCellDef=”let element”> {{ convertToINR(element.price)}} </td>

<! — <td mat-cell *matCellDef=”let element”> {{ element.price | convertToInr}} </td> →

</ng-container>

<! — Symbol Column →

<ng-container matColumnDef=”symbol”>

<th mat-header-cell *matHeaderCellDef> Symbol </th>

<td mat-cell *matCellDef=”let element”> {{element.symbol}} </td>

</ng-container>

<tr mat-header-row *matHeaderRowDef=”displayedColumns”></tr>

<tr mat-row *matRowDef=”let row; columns: displayedColumns;”></tr>

</table>

<mat-paginator [pageSizeOptions]=”[5, 10, 20]”

showFirstLastButtons

aria-label=”Select page of periodic elements”>

</mat-paginator>

</div>

with Pipe we can see only 10 times console.

So If you use the pipe angular doesn’t call pipe function as no changes in value. but in direct function angular it multiple times like different hooks and event.

Conclusion.

if We should use pipe in html view as if we go with functions it performance issue.

--

--