Angular 2 template methods vs getters

Question

I am wondering if there is any benefit to this:

<div>{{getSomething()}}</div> export class MyComp { getSomething() { return ...} } 

On this occasion:

  <div>{{getSomething}}</div> export class MyComp { get getSomething() { return ...} } 

Use vs getters methods to display calculated data.

Answer 1

I looked deeper into this and played with typescript Playground. I declared two classes, one with a getter, and the second with the get method, as described in your questions.

Let's see how it looks:

In the first example, we declared a method for obtaining the property value as follows:

 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } getGreeting() { return this.greeting; } } 

Which after translating to javascript is as follows:

 var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.getGreeting = function () { return this.greeting; }; return Greeter; }()); 

And regarding the second example, where we declared a getter as follows:

 class GetterGreeter { _greeting: string; constructor(message: string) { this._greeting = message; } get greeting() { return this._greeting; } } 

Which after the translation is as follows:

 var GetterGreeter = (function () { function GetterGreeter(message) { this._greeting = message; } Object.defineProperty(GetterGreeter.prototype, "greeting", { get: function () { return this._greeting; }, enumerable: true, configurable: true }); return GetterGreeter; }()); 

(You can play with javascript declaration and translation here )

As you can see using the get method (as in the first example), the method is declared in the prototype, and in the second example using the getter typescript template, the defineProperty api property is used.

In both cases, we invoke the method, and angular also invokes the method during change detection to identify changes and re-render.

As I see it, this is only syntactic sugar for the same approach, and I do not see any performance advantages for one of the methods.

Answer 2

If you are a getter or a method does not matter technically.

Some use the convention that a getter should behave like a field, and not do expensive calculations, while the method should be used if the calculation is larger than some very simple things, such as, for example, creating a full name from the first - and last name.

I think it is good practice to follow this distinction for Angular, because you need to avoid costly computation to bind to a view, because a method or getter can be called very often. In this case, it is better to save the result in the field and bind it to the field.

It is very important that the binding is that the method or getter does not return different values ​​on subsequent calls when no dependencies have been changed (for example, return {}; which will be considered as an instance of a new object and cause an error like "Expression" has changed since you last checked it. ")

Answer 3

The difference in the first case you use a function in an expression, but in the second case it is not a function. Therefore you cannot use

 <div>{{getSomething()}}</div> export class MyComp { get getSomething() { return ...} } 

---

The advantages of using the second method are the use of encapsulating the property inside the class, and you need to access it outside the class.

Getters and seters are part of the ES5 specification. You can read getter and setter .