btnloading.ts

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

@Directive({
  selector: '[btnLoading]'
})
export class BtnLoadingDirective {

  @Input() 
  set btnLoading(condition: boolean) {
    
    if(condition == true) {
      const icon2: HTMLElement = this.renderer.createElement("i");
      icon2.className = "fas fa-spinner fa-spin";

      this.renderer.addClass(this.el.nativeElement, 'btn-loading');
      this.renderer.setAttribute(this.el.nativeElement,"disabled", "disabled");
      this.renderer.insertBefore(this.el.nativeElement, icon2, this.el.nativeElement.firstChild)
    } else {

      this.renderer.removeClass(this.el.nativeElement, 'btn-loading');
      this.renderer.removeAttribute(this.el.nativeElement,"disabled");

      const icon: HTMLElement = this.el.nativeElement.querySelector("i");
  
      if(icon != undefined) {
        this.renderer.removeChild(this.el.nativeElement, icon)
      }
      
    }


  }

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

}