Enable or disable button based on a value

Question

I have a list of buttons like this

<div style="position: absolute; top:0; right: 0;">
 <button class="nav-link-btn" [routerLink]="['/dashboard']"> Dashboard </button>
 <button class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates </button>
 <button class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" > Users </button>
 <button class="nav-link-btn" [routerLink]="['/corporate/dashboard']"> Corporates </button>
 <button class="nav-link-btn" [routerLink]="['/archive']"> Archive </button>
 <button id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  >
        <span id="circle"></span> {{ name }}
 </button>
 <button  id="logout-btn" (click)="isDialogOpen = true" class="main">Log out</button>
</div>

I then have a user role that is stored in local storage. I am now trying to disable/enable the above buttons based on the users role.

eg if the userRole is a system admin then disable the Archive button but if the userRole is HR Admin then enable the Archive button

I am trying the following but it does not seem to be working as expected

isDisabled(userRole: string): boolean {
    if (userRole == 'System Admin') {
      return true;
    } else {
      return false;
    }
 }

[disabled]="isDisabled(userRole)"

All the buttons will be enabled/disabled based on the user role. For now I am trying to disable the archive button if the user is System Admin but it must be enabled if it is a HR Admin — RRB
– RRB, Commented May 13, 2019 at 6:15
Possible duplicate of Angular2 Forms - Submit Button Disabled? — manish kumar
– manish kumar, Commented May 13, 2019 at 6:17

wentjun · Accepted Answer · 2019-05-13 06:14:43Z

1

You should still make use of the input bindings and bind the disabled attribute of all buttons to the isDisabled() method. You won't be able to access userRole on your template (component.html) unless you have set it as a property.

<button [disabled]="isDisabled()" class="nav-link-btn" [routerLink]="['/archive']"> Archive </button>

And on your component.ts, you can get the userRole within the isDisabled() method. I am assuming the key is called userRole as well.

isDisabled(): boolean {
    var userRole = storage.getItem(`userRole`);
    if (userRole == 'System Admin') {
      return true;
    } else {
      return false;
    }
 }

answered May 13, 2019 at 6:14

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

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

2 Comments

RRB Over a year ago

Do I then need to make one function per button to specify which user role has access to which button?

wentjun Over a year ago

@skydev yes, you need to include` [disabled]="isDisabled()"` on all buttons that require that perticular function

Collectives™ on Stack Overflow

Enable or disable button based on a value

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related