title: Directive to disable elements and remove other [disabled] props
body: <p>I'm facing an interesting issue. We should implement a directive which disables UI elements depending on the user's role. For UI elements, which are not disabled by any other conditions it works but some buttons are disabled when at least one of many conditions is met and those conditions change when user interacts with the page.</p>
  <pre><code>// Directive
  @Directive({
    selector: '[roleDisable]',
  })
  export class RoleDisableDirective implements OnInit, OnChanges {
    @Input('roleDisable') role: string;
    @HostBinding('disabled') disabled: string;
  
    constructor(
      private store: Store&lt;fromApp.AppState&gt;, 
      private elementRef: ElementRef, 
      private renderer: Renderer2
    ) {}
  
    ngOnInit() {
      this.checkRights();
    }
  
    ngOnChanges() {
      this.checkRights();
    }
  
    private checkRights(): void {
      this.store.select(fromClient.hasNeededRole, {role: this.role }) //Observable&lt;string&gt;
        .pipe(take(1))
        .subscribe(hasRole =&gt; {
          // Attempt to remove [disabled], does not work
          if (element.hasAttribute('disabled')) {
            this.renderer.removeAttribute(element, 'disabled');
          }
          this.disabled = hasRole; // this works
       });
    }
  }
  
  // Usage in component template
  &lt;button
    roleDisable=&quot;start_process&quot;
    mat-raised-button
    (click)=&quot;startProcess()&quot;
    [disabled]=&quot;
      !processEnabled ||
      isUnavailable ||
      hasInputs ||
      preparationRunning ||
    &quot;
  &gt;
  </code></pre>
  <p>If I remove the <code>[disabled]</code> prop with all the conditions the button gets disabled so the directive is working. But when the <code>[disabled]</code> calculation is kept and no condition is evaluated as <code>true</code> it will override the directive and the button gets enabled, which is unwanted behavior.</p>
  <p>How can I force the directive to override/get rid of <code>[disabled]</code> prop calculation? Attempt to delete <code>[disabled]</code> prior to then disabling it again had no effect. Any ideas?</p>