3

In my template I'd like to check if a service is available to enable/disable a button. Now I figured I have 2 options:

template:

<button [disabled]="isServiceAvailable()"></button>

TS:

isServiceAvailable(): boolean {
    return true;
}

or

template:

<button [disabled]="isServiceAvailable"></button>

TS:

get isServiceAvailable() {
    return true;
}

Is there a performance difference between the 2? I know the first one is considered bad since the function will get called every time the change detection runs. Is this also true for the second option? Will the getter be executed every time, or is this a good solution?

Korfoo
  • 571
  • 2
  • 12
  • I guess you can find your answer here https://stackoverflow.com/questions/46749904/angular-is-binding-a-component-method-to-dom-target-property-a-wrong-practice – Thriller Mar 20 '19 at 13:48
  • Not really, I know just giving a property is better for the change detection, but I'm unsure if using a property through a `get property()` is behaving like a direct property or like a function call. – Korfoo Mar 20 '19 at 14:02
  • 1
    I believe there is no difference between `get XX(){return true }` and a normal function call. you can see with a test like this https://stackblitz.com/edit/angular-c4j8dz that on cahnges both are getting invoked in the same manner. – Thriller Mar 20 '19 at 14:40

1 Answers1

2

Using a simple test like https://stackblitz.com/edit/angular-c4j8dz you will see that there is no difference in method invocation between get foo(){ return true; } and a normal function foo(){return true;} in case of event changes.

Thriller
  • 485
  • 4
  • 11