title: Synchronizing angular interceptor objects
body: <p>I created interceptor that
  1) Show error toast on catchError();
  2) using tap() if method was not GET shows toast telling that data was successfully saved.</p>
  
  <p>The problem is, sometimes there are multiple methods called in a short span and I want to debounce showing success toast.</p>
  
  <p>I'm not sure what is the best way to handle this using angular, if I understand correctly each request creates new interceptor. I tried to create static Observer with debounce, but it didn't work since I guess I can't access static properties from non-static method. I'm a bit new to angular and typescript and now I'm lost. Is there a way to create some kind of singleton or static class class with property accessible to all objects in angular?</p>
  
  <p>This is what code looks like right now:</p>
  
  <pre><code>export class QueryResultNotificatorInterceptor implements HttpInterceptor {
      constructor(private readonly notificator: NotificationService) {}
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler) {
          return next.handle(req).pipe(
              catchError((err: HttpErrorResponse) =&gt; {
                  // all is fine here
              }),
              tap(x =&gt; {
                  if ((req.method === "PUT" || req.method === "POST" || req.method === "DELETE") &amp;&amp;
                      x instanceof HttpResponse &amp;&amp; x.status === 200) {
                          this.notificator.succesfullySaved(); // shows toast
                  }
              })
          );
      }
  }
  </code></pre>