Adds "busy" feedback state to HTML button

button-spinner.directive.ts

import { Directive, ElementRef, Input, AfterViewInit, Renderer2 } from '@angular/core';

@Directive({
    selector: '[button-spinner]'
})
export class ButtonSpinnerDirective implements AfterViewInit {

    private _originalText: string;

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

    ngAfterViewInit(): void {
        this._originalText = this.el.nativeElement.innerText;
    }

    @Input()
    busyText: string = 'Loading...';

    @Input()
    set busy(val: boolean) {

        console.log('busy', val);

        switch (val) {
            case true:
                this.el.nativeElement.innerText = this.busyText;
                this.el.nativeElement.disabled = 'disabled';
                this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
                break;
            case false:
                this.el.nativeElement.innerText = this._originalText;
                this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
                break;
            default:
                break;
        }
    }
}