loading-btn.directive.ts

loading-btn.directive.ts

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

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[ngxLoading]'
})
export class LoadingBtnDirective implements OnInit, OnChanges {

  @Input() textLoading: string;
  @Input() textInitial: string;
  @Input() disabled: boolean;
  @Input() loadingFlag: boolean | undefined = undefined;

  constructor(private elem: ElementRef) {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes): void {
    if (changes.condition && changes.condition.currentValue) {
      this.loadingFlag = changes.condition.currentValue;
    }
    this.elem.nativeElement.innerText = (this.loadingFlag) ? this.textLoading : this.textInitial;
    if (![undefined].includes(this.loadingFlag)) {
      this.elem.nativeElement.disabled = !!(this.disabled);
    }

  }

}

Example of use:

Attribute	Default	Objetive
textInitial	string: ''	Text initial
textLoading	string: ''	Text when loading
loadingFlag	boolean: false	swith loading

typescript

public loading:boolean

html

<!-- ********* SAMPLE WITH TRANSLATE ************ --->
     <button class="btn btn-primary btn-sm"
              ngxLoading [loadingFlag]="loading" [textInitial]="'GENERAL.SEND' | translate"
              [textLoading]="'GENERAL.SENDING' | translate">

<!-- ********* SAMPLE WITHOUT TRANSLATE ************ --->
     <button class="btn btn-primary btn-sm"
              ngxLoading [loadingFlag]="loading" [textInitial]="'Continue'"
              [textLoading]="'Sending...'">

When loading is false

When loading is true