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?
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;
}
}