Optimizing an Angular application - Minko Gechev
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about Angular change detection, template method calls and OnPush, because it explains why those patterns cost performance and how to avoid it.
Recommended by 4 people across 4 different months, 2018 to 2022.
What it is
A conference talk from ng-conf in which Minko Gechev of the Angular team walks through techniques for making Angular applications faster. It covers change detection, the OnPush strategy, pure pipes, memoization, and a demo of how heavy main-thread work blocks UI rendering.
What people said
Strong rec Andrei Gătej · 2019-11 · Stack Overflow · on “Angular change detection triggered by dummy method?”
Just watched this awesome talk [this video] yesterday. You should find your answer somewhere between 14:30 and 17:00. TLDR : when you have OnPush , change detection will trigger when @Input data changes , but also when internal events occur .
Recommends shohrukh · 2018-08 · Stack Overflow · on “Angular2+ callling a function in the view/template”
In addition to the answers&comments I would add some suggestions in order to optimize your code. First of all, take a look at this well-explained video [this video] (~40 minutes) from the last ng-conf ("Optimizing an Angular application - Minko Gechev"). The main idea is to use OnPush change detection strategy in your components, use Pure Pipes for methods like in your example and the memoization of functions. But if you have OnPush Strategy in your Component and changes came from the "outside Angular's world" - you also can Inject ChangeDetectorRef to your component and manually call markForCheck() (for more details take a look official documentation [LINK] )
Recommends Andrei Gătej · 2019-11 · Stack Overflow · on “ngDoCheck VS using function as attribute value - Performace difference”
My opinion is that the first approach should definitely be avoided . If a function is used this way, it will be invoked on every change detection cycle which can affect performance(sometimes, in a visible way ). ngDoCheck will also be called on each change detection cycle, so I would refrain myself from adding any serious work here. One approach is the one proposed by Massimiliano: use a pipe so you can leverage the power of memoization. Here is a great talk [this video] which enhances the benefits of using pipes. However , I think that for such cases, a pipe is not needed. If you say that the value depends on a value provided by a service asynchronously, you can wrap this logic into Subjects and
Recommends Andrei Gătej · 2019-11 · Stack Overflow · on “Should I be using class instance methods in an angular template”
I'm usually against using methods inside templates. If you want to use computed data inside the template, you can make use of getters. Also, a method inside a template can sometimes be replaced by a **pure pipe**. You can achieve memoization through using pipes. Find out more in this great talk [this video]
Recommends Zonaib · 2021-05 · Stack Overflow · on “Is it possible to identify the cause of a form control's change event?”
What you are experiencing is angular change detection being fired on any user interaction on page. Please read up more on angular change detection here [LINK] and here [this video]
Recommends pthor · 2022-12 · Stack Overflow · on “Angular Child Component Not Detecting Changes”
Is this "processor intensive routine" running on the main thread or are you using a web worker? From what you've described, it almost sounds like the UI is hanging due to the main thread being block from the processing that is going on. Minko Gechev demos something similar in this video [this video] . You'll see he's calculating the fibonocci sequence hundreds of times which is very processor intensive and blocks the UI from rendering.
Cites sdsd · 2021-02 · Stack Overflow · on “Why would we use changeDetection onPush strategy in child component, where there are the maked events?”
I learned about change detection strategy - onPush and after that today i meet this video on youtube [this video] where Minko is explaining about faster angular applications. From 7:45 - 11:20 he is saying that - When we have two components for example app component ( parent ) and employee-list component ( child ) and in the child component we are having inputs with keydown event, that makes CD - change detection to re-run. That is correct. He is saying for faster angular app we should use onPush strategy, and he makes that in the child component - but from the parent - app component he is sending now immutable js lists so they will be new reference - with onPush change detection we need new refe