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;
}
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.