Performance of functions in HTML template


#1

Hello there,
i want the texts within my HTML pages to be fully dynamical.
For that, i have an object which contains the strings i loaded from my webserver.
Normally, i would apply the text with something like this:

<p>{{object.text1}}</p>

But i would like to wrap this into a function, so i can track, if some string is missing and report that back to my webserver, so i cann fill it there.
So, i plan, to do the following:

<p>{{getText('text1')}}</p>

And in my controller something like this:

function getText(name){
   if(object[name]){
      return object[name];
   }
   //handle the missing string
}

In my first tests whit the second solution i saw, that getText() is called multiple times (up to 10 times and more). So i was wondering, how expensive is the function compared to the direct acces to the variable?
Can anyone give me some information an that?

Thank you

best regards
Skee


#2

As you saw it is called multiple times - and this is by design.

Why not do the check once when you “fill” the variable?


#3

Lets put the missing strings aside for a moment, because this will only be relevant during development. After that, i have all the strings needed available.

I think, the crucial part is, how expensive is the function with

if(object[name]){
      return object[name];
   }

compared to the direct acces to the variable.
Do you have any knowledge about that?

Thanks


#4

Do your strings change when you are on a given page? If your strings are more or less static during a view, then your biggest savings would come from disabling change detection once you have loaded what you want. Or you can change the change detection strategy from default to onPush. I did that, though it seems I’m one of the only people on this board who works in onPush change detection.

I suggest you dig into the Angular docs on ChangeDetectorRef and ApplicationRef. You’ll probably find a lot of cost savings, given what you’re trying to do.


#5

Yes, once the strings are visible on a page, they dont change anymore. But, it still would be nice, to still use the standard change detection somehow, because my whole logic is built on that.
But i will check the angular docs.

Thanks