title: How to retry when the API calls fails after subscribing in Angular 2+
body: <p>I am calling an API to get random details. The problem is that, sometimes I am getting 502 error as bad gateway and it may also break due to a bad network connection also.
  Below is my code to API call</p>
  
  <pre><code>// COMPONENT API CALL SUBSCRIBE
       this._service.post('randomAPI/getdetails', filters).subscribe((response: any) =&gt; {
       this.itemList = response;    
     });
  
  // SHARED SERVICE
       post&lt;T&gt;(url: string, body: any): Observable&lt;T&gt; {
       return this.httpClient.post&lt;T&gt;(url, body);
     } 
  </code></pre>
  
  <p>Whenever I get 500 or 502 server error, using an Interceptor I am routing to a error page to notify the user as server issue.</p>
  
  <p>Instead, can I make the API to try one more time in component level or interceptor level if it fails and then route to error page?</p>
  
  <pre><code>// INTERCEPTOR
      intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      return next.handle(request).pipe(catchError(error =&gt; {
          if (error.status === 401 || error.status === 400 || error.status === 403) {
              this.router.navigateByUrl('abort-access', { replaceUrl: true });
          } else if (error.status === 500 || error.status === 502) {
                  this.router.navigateByUrl('server-error', { replaceUrl: true });
          }
          return throwError("error occured");
       }));
      }
  </code></pre>
  
  <p>I saw few examples as they are using pipe and adding retryWhen() to achieve this. But as I am very new to angular, I am not able to figure out a way to do it.</p>
  
  <p>Could anyone please help?</p>