Accessing the 'disabled' property of mat-checkbox

Question

I have trouble changing the disabled property of mat-checkbox - https://material.angular.io/components/checkbox/api

<mat-checkbox (change)="itemChanged()" [(ngModel)]="item.selected"
              [disableAfterClick]="reenableButton">
</mat-checkbox>

I have a directive to disable the checkbox after clicking on it and then reenables it after an event is fired from the code (for example after a backend request completes). The directive is working as the changing of background color works exactly as expected. However disabling the checkbox doesn't work at all, which I don't understand as this directive works for button but it cannot catch mat-checkbox disabled property. I also tried applying it p-checkbox with the same result.

The directive:

import {Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
import {Subscription} from 'rxjs';

@Directive({
  selector: '[disableAfterClick]'
})
export class DisableAfterClickDirective implements OnInit, OnDestroy {

  @Input('disableAfterClick') reenableButton: EventEmitter<boolean>;
  subscription: Subscription;

  constructor(
    private renderer: Renderer2,
    private el: ElementRef
  ) {
  }

  @HostListener('click')
  onClick() {
    this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');//this doesn't work
    this.renderer.setProperty(this.el.nativeElement, 'disabled', 'true');//this doesn't work
    this.el.nativeElement.setAttribute('disabled', 'true');//this doesn't work
    this.el.nativeElement.style.backgroundColor = 'yellow';//this works
  }

  ngOnInit() {
    this.subscription = this.reenableButton.subscribe(value => {
      if (!value) {
        this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
        this.renderer.setProperty(this.el.nativeElement, 'disabled', 'false');
        this.el.nativeElement.style.backgroundColor = 'red';//this works
      }
    });
  }

  ngOnDestroy() {
    this.subscription && this.subscription.unsubscribe();
  }

}

How can I make this directive work for mat-checkbox?