title: Enable or disable button based on a value
body: <p>I have a list of buttons like this</p>
  
  <pre><code>&lt;div style="position: absolute; top:0; right: 0;"&gt;
   &lt;button class="nav-link-btn" [routerLink]="['/dashboard']"&gt; Dashboard &lt;/button&gt;
   &lt;button class="nav-link-btn" [routerLink]="['/admin/templates-dashboard']"  &gt; Templates &lt;/button&gt;
   &lt;button class="nav-link-btn" [routerLink]="['/admin/roles-dashboard']" &gt; Users &lt;/button&gt;
   &lt;button class="nav-link-btn" [routerLink]="['/corporate/dashboard']"&gt; Corporates &lt;/button&gt;
   &lt;button class="nav-link-btn" [routerLink]="['/archive']"&gt; Archive &lt;/button&gt;
   &lt;button 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>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.</p>
  
  <p>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</p>
  
  <p>I am trying the following but it does not seem to be working as expected</p>
  
  <pre><code>isDisabled(userRole: string): boolean {
      if (userRole == 'System Admin') {
        return true;
      } else {
        return false;
      }
   }
  </code></pre>
  
  <p>[<code>disabled]="isDisabled(userRole)"</code></p>