how to enable and disable button based on user role

Question

Hi all i need to enable and disable button based on user role i want to enable the button when user role is admin for other roles it has to disabled my TS code

isDisabled(): boolean {
    this.userrolename = SessionStorage.getSessionData(CommonConstants.userRoleName);
    if (this.userrolename == 'Admin') {
      alert(this.userrolename);
      return true;
    } else {
      return false;
    }
 }

HTML code

<button type="button" [disabled]="isDisabled()" class="close pull-right"  aria-label="Close" (click)="closeModal()"> </button>

I am new to angular and typescript please help me thanks for any help in advance

Answer 1

It's better to use getter for your case to avoid executing function every second: example:

private _isDisabled

set isDisabled(value){
this._isDisabled = value;

}
get isDisabled(){
return this._isDisabled
}

ngOnInit(){

    this.userrolename = SessionStorage.getSessionData(CommonConstants.userRoleName);
    if (this.userrolename == 'Admin') {
this.isDisabled = true;
    } else {

this.isDisabled = false;

    }


}

Html:(get last isEnabled value after each change)

<button type="button" [disabled]="isDisabled" class="close pull-right"  aria-label="Close" (click)="closeModal()"> </button>