title: Angular 6: Observable async binding not working as expected after HttpErrorResponse
body: <p>I'm trying to handle errors in angular globally using an ErrorHandler as layed out here: <a href="https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a" rel="nofollow noreferrer">https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a</a></p>
  
  <p>I'm forwarding the error messages to a notification service. The app component template is bound to an observable provided by the service using async pipe.</p>
  
  <p>When a client error is thrown, everything works as expected: The error is caught, notification is sent and the UI is displaying the error message. After 3 seconds the message disappears, since the observable changes to a null value.</p>
  
  <p>On HttpErrorResponses the behavior is strange: The error is caught, notification is sent, but the UI does not update. Unless another HttpErrorResponse is thrown within 3 seconds!</p>
  
  <p>Am i missing something or is this a bug in Angular 6 or RxJs?</p>
  
  <p>I created a <strong>minimal, complete and verifiable example</strong> on stackblitz: 
  <a href="https://stackblitz.com/edit/angular-e9keuw" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-e9keuw</a></p>
  
  <p>The ErrorHandler:</p>
  
  <pre><code>@Injectable()
  export class ErrorSink implements ErrorHandler {
  
      // ErrorHandler is created before the providers
      // we have to use the Injector to get them
      constructor(private injector: Injector) {}
  
      handleError(error: Error | HttpErrorResponse) {
          console.error('Caught error: ', error);
  
          const notificationService = this.injector.get(NotificationService);
  
          // client error
          if (!(error instanceof HttpErrorResponse)) {
              console.log('client error!');
              return notificationService.notify(error.message);
          }
  
          // offline error
          if (!navigator.onLine) {
              console.log('No Internet Connection');
              return notificationService.notify('No Internet Connection');
          }
  
          // http error
          console.log(error.status, error.message);
          return notificationService.notify(`${error.status} - ${error.message}`);
      }
  }
  </code></pre>
  
  <p>The NotificationService:</p>
  
  <pre><code>@Injectable()
  export class NotificationService {
  
    private subject: BehaviorSubject&lt;string&gt; = new BehaviorSubject(null);
    readonly notification$: Observable&lt;string&gt; = this.subject.asObservable();
  
    constructor() {}
  
    notify(message) {
      console.log('notification', message)
  
      this.subject.next(message);
      setTimeout(() =&gt; this.subject.next(null), 3000);
    }
  }
  </code></pre>
  
  <p>The Component:</p>
  
  <pre><code>@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
  
    constructor(
      private notificationService: NotificationService,
      private http: HttpClient
    ) {}
  
    throwError(): void {
      throw new Error('an error was thrown!');
    }
  
    loadUrl() {
      this.http.get('https://www.google.com/').subscribe(
        data =&gt; console.log(data)
      );
    }
  }
  </code></pre>
  
  <p>And the bound template:</p>
  
  <pre><code>&lt;div *ngIf="notificationService.notification$ | async as notification"&gt;
    {{ notification }}
  &lt;/div&gt;
  </code></pre>