title: Angular material mat-button doesn't update the disabled change from outer directive
body: <p>I have a simple custom directive that needs to make the element disabled.</p>
  <pre><code>&lt;button mat-button [myCustomDirective]=&quot;'mode1'&quot;&gt;Edit&lt;/button&gt;
  
  @Directive({
    selector: '[myCustomDirective]'
  })
  export class MyCustomDirective implements OnInit {
    @Input() myCustomDirective: string;
  
    @Input()
    @HostBinding('disabled')
    public disabled: boolean;
  
    constructor(
      private el: ElementRef,
      private cd: ChangeDetectorRef
    ) {}
  
    ngOnInit() {
  
      switch (this.myCustomDirective) {
        case 'mode1':
          this.disabled = true;
          this.el.nativeElement.disabled = true;
  
          setTimeout(() =&gt; {
            this.cd.markForCheck();
            this.cd.detectChanges();
          });
  
          break;
  
        default:
          this.el.nativeElement.remove();
  
          break;
      }
    }
  }
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-nivhyg?file=src/app/button-overview-example.html" rel="nofollow noreferrer">DEMO</a></p>
  <p>Even if the <strong>disabled</strong> attribute appears in the DOM, the <strong>mat-button</strong> doesn't get fully update ( the disabled styles are missing, because some of the disabled classes that angular material haves for the <strong>mat-button</strong> are missing also from the DOM ). So <strong>mat-button</strong> doesn't  updates. Any suggestions for this ?</p>