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.
- Created a table with Angular Material
- JSON of crypto currencies.
- In Price column two scenarios one with function and other with pipe same code in both pipe and function.
- 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.
