CODEWITHSUNDEEP
angular
RRB
RRB

Reputation: 2116

Button not being disabled if I use multiple directives

I have a few buttons which are supposed to be enabled or disabled based on the logged in user role. The user role is stored in local storage and I get the value like this

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

Then I have an if statement which goes through all of the possible user roles and set a variable to true or false. This variable is then appended to each button.

  if(this.userRole === 'System Admin') {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  } else if (this.userRole === 'CAT Manager') {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  } else if (this.userRole === 'HR Admin') {
    this.corporateButtonDisabled = true;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = true;
    this.profileButtonDisabled = false;
  } else {
    this.corporateButtonDisabled = false;
    this.dashboardButtonDisabled = false;
    this.rolesButtonDisabled = false;
    this.templatesButtonDisabled = false;
    this.archiveButtonDisabled = false;
    this.profileButtonDisabled = false;
  }

My HTML is then set like this

<div style="position: absolute; top:0; right: 0;">
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/dashboard']"  > Dashboard 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  > Templates 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" > Users 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/corporate/dashboard']"  > Corporates 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    class="nav-link-btn" [routerLink]="['/archive']"  > Archive 
  </button>
  <button 
    [disabled]="corporateButtonDisabled"
    [disabled]="dashboardButtonDisabled" 
    [disabled]="rolesButtonDisabled"
    [disabled]="templatesButtonDisabled"
    [disabled]="archiveButtonDisabled"
    [disabled]="profileButtonDisabled"
    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>

Something is not working correctly as I can still click on all the buttons when I am logged in as a HR Admin. Any thoughts?

Upvotes: 0

Views: 37

Answers (1)

Nadhir Falta
Nadhir Falta

Reputation: 5257

You don't have to use all those directives, you can just chain you conditions like so: for example the /my-profile button:

<button 
    [disabled]="corporateButtonDisabled || 
                rolesButtonDisabled || 
                dashboardButtonDisabled ||
                templatesButtonDisabled || 
                archiveButtonDisabled || 
                profileButtonDisabled"
    id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  > 
    <span id="circle"></span> {{ name }}
</button>

Upvotes: 1

Related Questions