Angular is a great framework that offers great tools for developers to build web applications easily. One of its core features is HTML is written into templates that are HTML files without any DOCTYPE declaration. They can start with any HTML tag you want because they;ll be attached to the index.html file, which has elements like the DOCTYPE, metadata, links to scripts and styles, etc.
The cool part about templates isn’t that they don’t require a DOCTYPE or metadata. The cool part is they can contain some things regular HTML files can’t. One of those things is you can open up double braces anywhere and include some TypeScript inside it. Just like that
We have the user object here, and we’re assigning its image’s path to the src attribute of the img tag. That is a quite useful feature. Just like the user variable, you can also use methods inside double braces.
So one example can be this:
Here ,we use a helper method called getAddress() to get the address from the user object in a representative way. The method is so basic:
Nothing wrong can happen, right?
It looks like we have what we need. The address is right there.
Do you want to know what’s wrong with it? Let’s just place a log at the beginning of the method.
In this way, we could know when this method has been triggered. What we are expecting now is to see this console only once, but will that happen?
When I just refresh the page and open the console, I see:
The getAddress() method has been triggered four times after the page refreshed. And every time I click on the page, hover the mouse over the text area, or click on it, I get more and more consoles.
This happens because of Angular change detection. I can assure you there are no problems with the change detection of Angular — the problem is on our side. We have used a method inside a template inside double braces. That’s not very clever. What we should do is assign this address representation to a variable and be sure to call this method only once.
In this way, the getAddress() method will be called only once, and the string representation of the user’s address will be assigned to the address variable.
We can be sure the method is being called only once just by looking at the console.
By triggering the getAddress every time we click or hover in the text area, we just slow down our application.
This may not be noticeable for such a simple case. but imagine having a large form filled with values using methods like that. The performance of that app would be affected much more.
Conclusion
With frameworks like Angular, we get a lot of cool features regular HTML doesn’t give us.
But if the power of those features is being used without thinking, then we start hearing our team talk about slow frameworks, how Angular is bad, etc. In fact, in most cases, the problem is inside our code — we just didn’t notice it.
Thanks for reading!
Top comments (4)
Don't forget you can modify your component's ChangeDetectionStrategy which will make it so that your method is only called once!
Thanks for this awesome tip!
I just tested this with a getter method and it also causes the console to blow up. Good to know about the change detection!
As mentioned by others, we can also use ChangeDetectionStrategy to OnPush. But sometimes it is not possible if you have a big template and handling all Reactive events starts to become a real pain.