Increasing Performance - more than a pipe dream - Tanner Edwards
Why Stack Overflow recommends it
Stack Overflow users link it when explaining why Angular templates should use pipes rather than calling component functions on every change detection cycle.
Recommended by 2 people across 3 different months, 2018 to 2019.
What it is
A short ng-conf 2018 talk by Tanner Edwards on improving Angular performance, centred on using pure pipes instead of function calls in templates. The clip is about five and a half minutes and shows how pipe memoization avoids needless recalculation during change detection.
What people said
Recommends Felix Lemke · 2018-05 · Stack Overflow · on “Multiple selects with the same options”
For performance reasons you should consider using pipes as suggested in my answer. Pipes provide a memoization, which does not let the pipe recalculate everything on each change. This maybe doesn't matter if you have got just a very few items. But if it get's a little larger you should really consider using pipes. Check out this demonstration on ngConf2018 [this video] .
Recommends SiddAjmera · 2019-02 · Stack Overflow · on “Angular 7 ,Reactive Form slow response when has large data”
So after about a day of playing around with your StackBlitz, here I am with the solution. I think this would significantly improve the performance. Step 1: Create interfaces for your Data Model Doing that would significantly make the code cleaner and more readable. It would also make the code more manageable and easy to work with. So here we go with the list of interface s for your specific scenario: export interface Hotel { id: string; currencyId: string; hotelYearId: string; priceTaxTypeId: string; code: string; name: string; createBy: string; createDate: string; lastUpdateBy: string; lastUpdateDate: string; remark: string; internalRemark: string; roomTypes: RoomType[]; } export interface
Recommends SiddAjmera · 2019-10 · Stack Overflow · on “Problem of calling angular function more than once in conditional cases”
This is happening since you've called a function/method( TEST ) in one of the data-binding syntaxes( *ngIf ). So whenever Angular performs Change Detection, your function will get called. Change Detection is quite straightforward when it comes to variables. But it's different for functions. You see, the only way to check if the value of a function has changed is by calling it. That's why it is being called over and over again. I've answered a few questions similar to this one here on StackOverflow. You might want to have a look at this answer [LINK] for more information on all these scenarios related to performance. You might also want to have a look at this talk by Tanner Edwards from NgCon
Cites FutureDroid · 2018-05 · Stack Overflow · on “Replace function call with pipe in angular template”
Read the benefits of using pipes versus invoking functions in angular templates. see vid here: [this video] I have this function in my template.html <h1 [class]="alignText()" [innerHtml]="data.text"></h1> And the function in my component.template.ts alignText(): string { let defaultText = "center"; return "text-" + (this.text || defaultText) } Anyone has suggestions how I could concert the html alignText() to a pipe to accomplish the same result?