Angular2+ callling a function in the view/template
Clash Royale CLAN TAG#URR8PPP
Angular2+ callling a function in the view/template
When I call a function in the view of an Angular component the function gets called over and over again. For example:
nightclub.component.ts
import Component from '@angular/core';
@Component(
selector: 'app-nightclub',
templateUrl: './nightclub.component.html',
styleUrls: ['./nightclub.component.css']
)
export class NightclubComponent
doStuff(): number
return 1;
nightclub.component.html
doStuff()
This will call the doStuff() method over and over again.
Should one ever do this? If so, in what situation can this be beneficial?
Try logging something before returning one in my function in an Angular app. If you then check console you will see that it is spammed by the function being called many times
– Willem van der Veen
Aug 12 at 21:52
Yes, this is a normal behaviour of Angular2+ Change detection strategy. The framework should check the template and the model then update the view if there will be any changes.
– sherlock.92
Aug 12 at 21:53
2 Answers
2
This will be called every change detection cycle it is not advised to use a function inside the template as it will not be large performance hit.
The implementation of the function / data you want to show on the template is highly dependent of your use case.
Example:
If are parsing text then a pipe would be a great option as it can be memoized
If you changes to the data can happen outside of the component where Inputs and Outputs cannot be used then an Observable would be a good option.
Inputs
Outputs
So Angular checks for changes multiple times a second?
– Willem van der Veen
Aug 12 at 21:55
It happens once per applicationRef tick in production and twice in dev mode If you want to optimize one way is using
OnPush you can read more netbasal.com/…– Nico
Aug 12 at 22:02
OnPush
Thanks a lot for the help!
– Willem van der Veen
Aug 12 at 22:05
you are welcome :)
– Nico
Aug 12 at 22:08
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 (~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)
ChangeDetectorRef
markForCheck()
Video looks interesting will check out thanks!
– Willem van der Veen
Aug 12 at 22:05
you are welcome :)
– sherlock.92
Aug 12 at 22:07
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
What do you mean by "This will call the doStuff() method over and over again" ?
– sherlock.92
Aug 12 at 21:50