Why You Should Never Use Methods Inside Templates in Angular
And what to do instead
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:
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
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.
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!