CODEWITHSUNDEEP
angularprimeng
RRB
RRB

Reputation: 2116

Disable prime-ng button based on a value in Local Storage

I am trying to enable/disable buttons based on a user role in local storage.

I have a value in local storage like this Key: Role, Value: "HR Admin"

My HTML looks like this

  <button class="nav-link-btn" [routerLink]="['/dashboard']"  > Dashboard </button>
  <button  class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates </button>

My TS file looks like this and this function fires onInit

  const userRole = localStorage.getItem('role');
  if(userRole === 'System Admin') {
    disabled() == false
  } else if (userRole === 'CAT Manager') {
    disabled() == false
  } else if (userRole === 'HR Admin') {
    disabled() == true
  } else {
    disabled() == false
  }

Any ideas how this should be done?

Upvotes: 1

Views: 2425

Answers (2)

Zarna Borda
Zarna Borda

Reputation: 735

Use [disabled] property to enable or disable button based on value,

Ts File:

const userRole = localStorage.getItem('role');

HTML File:

<button class="nav-link-btn" [routerLink]="['/dashboard']" [disabled]="userRole === 'HR Admin'"> Dashboard </button>

Upvotes: 4

Syed Kashif
Syed Kashif

Reputation: 422

Try this i hope its work for you.

 <button class="nav-link-btn" [routerLink]="['/dashboard']" [disabled]="buttonDisabled"> Dashboard </button>
 <button  class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']" [disabled]="buttonDisabled"> Templates </button>

   const userRole = localStorage.getItem('role');
  if(userRole === 'System Admin') {
    this.buttonDisabled = false;
  } else if (userRole === 'CAT Manager') {
    this.buttonDisabled = false;
  } else if (userRole === 'HR Admin') {
    this.buttonDisabled = true;
  } else {
    this.buttonDisabled = false;
  }

Upvotes: 2

Related Questions