Why You Should Never Use Methods Inside Templates in Angular

And what to do instead

Klement Omeri
Jan 30 · 4 min read

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!

Better Programming

Advice for programmers.

Klement Omeri

Written by

Web app developer. Interested in Angular, NgRx, Django Rest Framework.

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade