I have a generic button component:

@Component({
  selector: "debounced-submit-button"
  template: `
    <button (click)="debounceClick.emit()" [disabled]="disabled">
      <ng-content></ng-content>
    </button>
  `})
export class DebouncedSubmitButton {
  @Input() disabled: boolean = false;
  @Output() debounceClick = new EventEmitter();
}

And I use it like:

@Component({
  selector: "example-component",
  template: `
    <debounced-submit-button (debounceClick)="makeBackendCall()" disabled="loading">
    </debouncedSubmitButton>
  `})
export class ExampleComponent {
  loading = false;
  makeBackendCall(): Promise<any> {
    this.loading = true;
    return apiService.makeCall()
      .then(result => useResult(result))
      .finally(() => this.loading = false);
  }
}

So you can't click on the button again while the HTTP call is in progress. However, this requires me include a lot of boilerplate call to track "loading" wherever I have a button.

Is there any way to communicate back the results of the (debounce-click) event to the debounced-submit-button, so I can centrally locate my disabling code? Like, ideally, I just want

<debounced-submit-button (debounce-click)="makeBackendCall()">

and have the component be something like

@Component({
  selector: "debounced-submit-button"
  template: `
    <button (click)="onClick($event)" [disabled]="disabled">
      <ng-content></ng-content>
    </button>
  `})
export class DebouncedSubmitButton {
  disabled: boolean = false;
  @Output() debounceClick = new EventEmitter();

  onClick() {
    this.disabled = true;
    // I don't think this works, but I want the return value of the callback function
    httpCall = debounceClick.emit();
    httpCall.finally(() => this.disabled = false);
  }
}

Like, obviously this doesn't work, because the debounceClick event emitter could be subscribed to by multiple listeners, or no listeners. I'm just looking for a less-boilerplate-y way to communicate to the DebouncedSubmitButton that the API call is done, and the user should be able to interact with it again. Is there a way to do this?

CodePudding user response：

create a flag in the api service, inside the service, fundamentally there will be four implementations mostly! ( GET,POST,PUT,DELETE ) so we just need to toggle the flag, we use the tap operator, which will execute after the API call happens, but will not do anything to the response. then use that flag to enable/disable buttons in any components. Please check the implementation below!

import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';

@Injectable()
export class ApiService {
  apiCallInProgress = false;

  constructor(private http: HttpClient) { }

  get(): Observable<any> {
    this.apiCallInProgress = true;
    return this.http.get('https://jsonplaceholder.typicode.com/users').pipe(
        tap(() => {this.apiCallInProgress = false;}
    );
  }
}

Use the service variable in the component.

@Component({
  selector: "debounced-submit-button"
  template: `
    <button (click)="debounceClick.emit()" [disabled]="getDisabled()">
      <ng-content></ng-content>
    </button>
  `})
export class DebouncedSubmitButton {
  @Output() debounceClick = new EventEmitter();
constructor(apiService: ApiService){}
  getDisabled() {
    return this.apiService.apiCallInProgress;
  }

}

CodePudding user response：

Sounds to me like you just want to pass a function as an input.

template: `
    <button (click)="_onClick($event)" [disabled]="disabled">
      <ng-content></ng-content>
    </button>
  `})
export class DebouncedSubmitButton {
  disabled: boolean = false;
  @Input() onClick: () => Promise<any>;

  _onClick() {
    this.disabled = true;
    this.onClick().finally(() => this.disabled = false;)
  }
}

<debounced-submit-button [onClick]="makeBackendCall">

Just make sure you pass arrow functions instead of regular functions to maintain the lexical context of this.

export class ExampleComponent {
  makeBackendCall = () => {
    return this.apiService.makeCall()
      .then(result => this.useResult(result))
  }
}