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

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ACHARYA ANIL SURYAVANSHI

Software Engineer | Bharat Swabhiman Patanjali Social Activist | Speaker | Motivator | Yoga Trainer