CODEWITHSUNDEEP
angular
Crocsx
Crocsx

Reputation: 7620

are readonly function on template slowing angular?

let's say I have the following template 

<div>{{myvalue.ID}}</div>

I can provide ID using 

   public ID: string;

or 

   get ID() {
      return this._ID;
   }

or even do something like 

<div>{{myvalue.getID()}}</div>

readonly getID= (): string => this.ID;

which looks like a get actually.

My question is, compare to give a direct variable reference, are get and readonly function slowing angular ?

I have some variable I would like to display to the user, but keep them private cause I don't want anyone to modify them (in code and template). I believe there are no other way of doing so but, is it impacting performance ?

Upvotes: 0

Views: 43

Answers (1)

ashish.gd
ashish.gd

Reputation: 1778

It is not good design to use functions for binding references.

Few reasons for this are:

  • A new reference to the function is created every time angular change detection (CD) runs. Since once returned the function reference is GC.
  • Also, the function is called every time CD runs. This might not seem much for simple getter/setter functions. But can have significant impact if the function has more complex implementation. Eventually making CD heavy
  • Any code between the interpolation syntax is evaluated as it is by Angular which results in the function call for CD cycle.

Upvotes: 1

Related Questions