How to handle ajaxStart and ajaxStop events in Angular2 way

Question

I need to trigger similar to JQuery events ajaxStart and ajaxStop I found a half solution here -> How to set default HTTP header in Angular2? So, at the moment i can handle an ajaxStart Event.

Any solutions how to handle ajaxStop event?

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    //onAjaxStart
    $( "#loader" ).show();
    return super.post(url, body, options); //Any method here to handle event?
}

I tried to use .catch(), but it fires only onError

I need to call my animate loader when ajax fires, and hide it when it stops every time i use ajax request.

So i am trying to override default ajax methods. But i can't find right observable method(

This is unrelated to your question, but instead of using jQuery why don't you have an if statement on the elements and show/hide them based on a variable inside of your Component? I think that's generally the Angular way of doing things. — Dehli

Thierry Templier Thierry Templier · Accepted Answer · 2016-04-25T15:33:47

You could leverage the "finally" operator of observable.

Here is a sample of use:

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    //onAjaxStart
    $( "#loader" ).show();
    return super.post(url, body, options).finally(() => {
      //onAjaxStop
      $( "#loader" ).hide();
    });
}

How to handle ajaxStart and ajaxStop events in Angular2 way

1 Answers