When writing template for components we are tempted to write simple methods to compute values based on multiple values, it may seem simple enough and you do end up making it work. But its WRONG, your entire app takes a big hit in performance.

<p>{{convertCurrency(data.value, data.currencyCode)}}</p>

This code snippet would seem harmless to someone coming from a ReactJS background, but in Angular its a bomb, going off every milisecond and destroying the perfomance of your application

Screen-Shot-2019-09-05-at-12.06.22

Unlike React which is dependent on component state to re-render the component, Angular doesn't wait for anything it listens for any changes and tries to re-render, so this goes in an infinite loop hence slowing down your application.

Workaround for this:

<p>{{data.convertedCurrencyValue}}</p>

Do the conversion on the data side, either on the server or in your component and push it as a static value, this would be an immediate bump in performance of your app if you have such methods dangling in your app.

Hope this helps.