title: Button not being disabled if I use multiple directives
body: <p>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</p>
  
  <pre><code>this.userRole = localStorage.getItem('role');
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>  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;
    }
  </code></pre>
  
  <p>My HTML is then set like this</p>
  
  <pre><code>&lt;div style="position: absolute; top:0; right: 0;"&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      class="nav-link-btn" [routerLink]="['/dashboard']"  &gt; Dashboard 
    &lt;/button&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  &gt; Templates 
    &lt;/button&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" &gt; Users 
    &lt;/button&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      class="nav-link-btn" [routerLink]="['/corporate/dashboard']"  &gt; Corporates 
    &lt;/button&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      class="nav-link-btn" [routerLink]="['/archive']"  &gt; Archive 
    &lt;/button&gt;
    &lt;button 
      [disabled]="corporateButtonDisabled"
      [disabled]="dashboardButtonDisabled" 
      [disabled]="rolesButtonDisabled"
      [disabled]="templatesButtonDisabled"
      [disabled]="archiveButtonDisabled"
      [disabled]="profileButtonDisabled"
      id="name-btn" class="nav-link-btn" [routerLink]="['/my-profile']"  &gt; 
      &lt;span id="circle"&gt;&lt;/span&gt; {{ name }}
    &lt;/button&gt;
    &lt;button  id="logout-btn" (click)="isDialogOpen = true" class="main"&gt;Log out&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>