Angular-2 : Is function call instead in-line boolean condition impact on performance?

Question

I am working with user authorization and going to disabled button as per condition.

I have already implemented logic, but I wants to know if I use function instead of In-line logic may impact on performance or not?

My logic are as below:

In line:

<button type="button" class="btn btn-primary" [disabled]="!ApplicationManager.Model.CanModifyFramework && ((selectedPage.Scope!='0' && !ApplicationManager.Model.CanModifyConfiguration) || (selectedPage.Scope=='0' && ApplicationManager.Model.CanModifyConfiguration))">Save & Close</button>

Function:

<button type="button" class="btn btn-primary" [disabled]="!GetUserAccessability(selectedPage.Scope)">Save & Close</button>

public GetUserAccessability(scope: any): boolean {
    let result: boolean = false;

    if (this.Model.CanModifyFramework) {
        result = true;
    }
    else if (this.Model.CanModifyConfiguration && scope>0)
    {
        result=true
    }       

    return result;
}

Günter Zöchbauer · Accepted Answer · 2017-04-27 11:13:19Z

2

Angular change detection is most efficient when you bind to a field instead of a method.

It's better to use an observable or an event that notifies on changes, instead of polling, and then update the field in the event handler.

Also a good way is to use ChangeDetectionStrategy.OnPush and bind to an observable. The | async pipe will call ChangeDetectorRef.markForCheck() every time a new value is emitted.

The worst thing you can do is binding to a method that returns a new array of object instance for each call. This will bring your application to its knees. Your method doesn't do that and therefore isn't that bad. Binding to a field or Observable is IMHO still the better way.

answered Apr 27, 2017 at 11:13

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

eko Over a year ago

Wouldn't creating a new variable inside the method like the OP did, push a new value into the stack? Hence decrease performance a little bit?

eko Over a year ago

Example: return this.Model.CanModifyFramework || (this.Model.CanModifyConfiguration && scope>0) isn't this better for the current situation?

Sandip - Frontend Developer Over a year ago

@Gunter : can you please update my code in your answer how I get better performance, I have not deep knowledge as you described in third block (observable, async pipe and other stuff)

Günter Zöchbauer Over a year ago

If you have something like getFoo() { return { bar: 'abc'}; } then a new object is returned for each call which is the worst case. You would at least need to cache the instance and only return a new one when something actually changed. I don't know what would be a good way to change your code, it depends on where and when CanModifyFramework can be updated.

Sandip - Frontend Developer Over a year ago

When we put break point in function then it continuously call the function and come at that point, so it bad or normal?

|

Collectives™ on Stack Overflow

Angular-2 : Is function call instead in-line boolean condition impact on performance?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related