Łapanie eventu http requesta

Mam prosty front-end w Angularze 6, jest tam pole na wpisanie id po którym chce znaleźć produkt oraz przycisk search. W momencie gdy ktoś kliknie search chciałbym zablokować możliwość ponownego przyciśnięcia dopóki nie przyjdzie odpowiedź z requesta. Jak to wyłapać?

Z góry dzięki za odpowiedzi

Pewnie pod przycisk masz podpięte zdarzenie click, w którym wysyłasz requesta przez jakis HttpClient. Stwórz sobie boola i podepnij go pod wlasciwosc "enabled" i zmien jego wartosc po otrzymaniu odpowiedzi z requesta.

W angularze możesz na button ustawic [disabled]="valid" i wtedy w .ts przy kliknieciu search ustawiasz valid na true a po otrzymaniu zmieniasz na false

<button [disabled]="valid" type="submit" >Search</button>

@pixel_perfect: Robię dokładnie tak jak mówisz, ale button nie zmienia się z powrotem na aktywny po zakończeniu requesta.. nie wiem co jest grane...

HTML

<button type="button" (click)="searchMessages(id.value, key.value, value.value)"  [disabled]="buttonDisabled">
</button>

.TS

buttonDisabled = false;

ngOnInit(): void {
    this.buttonDisabled = true;
    this.getMessagesByInput();
}

searchMessages(id, key, val): any {
    this.buttonDisabled = true;
    this.searchId = id;
    this.searchKey = key;
    this.searchTextValue = val;
    this.getMessagesByInput();
}

getMessagesByInput(): any {
    this.buttonDisabled = true;
    this.messagesService.getMessagesByInput(this.searchId, this.searchKey, this.searchTextValue).subscribe(data => {
        this.messages = data;
        this.buttonDisabled = false;
    });
    this.buttonDisabled = false;
}

Poprawka, w powyższym kodzie button niechce się zrobić disabled

Usuń tą ostatnią linijkę z metody getMessagesByInput:

this.buttonDisabled = false;

Ustawiasz przycisk z powrotem na wyłączony od razu po wysłaniu requesta, a powinieneś zmienić jego stan dopiero jak odbierzesz odpowiedź.