CODEWITHSUNDEEP
angularangular-changedetectiontransloco
zvocs
zvocs

Reputation: 31

Is using transloco 't' function from the directive calling the function every time on change detection happens in Angular?

I was wondering about this issue about the "t" function transloco uses in its directive.

When we use functions in our template in angular for, lets say, showing users email. So we write something like:

<div>
  {{getUserEmail()}}
</div>

From my knowledge of angular, unless you put OnPush detection strategy, this function will get called on every change detection. This is why it's recommended to use pipes when possible because they are not subject to this problem.

So my question is, does the 't' function of transloco somehow avoid this call every time or not? Or am I missunderstanding transloco/angular?

P.S. I know the function is memoized but it would still be better if it's not called every change detection.

I'm considering using transloco pipe mostly because it seems to me like it's better to have more subscriptions in the app then having "t" function called a bunch of times. Maybe my perception is wrong?

Upvotes: 1

Views: 616

Answers (1)

manuelkue
manuelkue

Reputation: 122

According to the transloco docs using the structural directive together with the t() function is even the recommended approach:

https://jsverse.github.io/transloco/docs/translation-in-the-template#structural-directive

Using a structural directive is the recommended approach. It's DRY and efficient, as it creates one subscription per template.

Note that the t function is memoized. It means that given the same key it will return the result directly from the cache.

So, yes it will call the function every time change detection kicks in but will immediately return a value from cache. Therefore, it's no issue one has to be concerned about :)

Additional note: Using the pipe should be even prevented as each pipe will create a new subscription. See the sourcecode here: https://github.com/jsverse/transloco/blob/master/libs/transloco/src/lib/transloco.pipe.ts

Upvotes: 0

Related Questions