title: Angular: How to show a Toast when resolve() results in an error
body: <p>I am trying to fetch data by means of resolve, before I navigate users to the other page. I am able to do this successfully when the resolve is successful. What I am trying to do is, when the resolve fails, for whatever reason, show a Toast message (custom component that I made) to the user with a custom message. This is where I am stuck.</p>
  
  <p><strong>So this will be the scenario:</strong></p>
  
  <ol>
  <li><p>User will be on the Dashboard page.</p></li>
  <li><p>User will click on Settings link in Navbar.</p></li>
  <li><p>Resolve() will try to fetch details from the Database before navigating to Settings page.</p></li>
  <li><p>If for any reason, resolve() fails, then user should still be on the Dashboard page, but should now see a Toast message that says that there was some error.</p></li>
  </ol>
  
  <p><strong><em>My code is as shown below:</em></strong></p>
  
  <p><strong>Code for the Resolver:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Resolve } from "@angular/router";
  import { Observable } from "rxjs/Observable";
  import { SettingsService } from "../../services/settings/settings.service";
  
  @Injectable()
  export class SettingsResolverService implements Resolve&lt;any&gt; {
  
    constructor(private settingsService: SettingsService) {
    }
  
    resolve(): Observable&lt;any&gt; {
      return this.settingsService.getAllSettings()
        .map((res) =&gt; res)
        .catch(error =&gt; {
          console.log(error);
          alert('Data cannot be retrieved at this time. Please try again later.');
          return Observable.empty();
        });
    }
  
  }
  </code></pre>
  
  <p><strong>Here is my custom Toast component:</strong></p>
  
  <pre><code>import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
  
  @Component({
    selector: 'app-message-toast',
    templateUrl: './message-toast.component.html',
    styleUrls: ['./message-toast.component.css']
  })
  export class MessageToastComponent implements OnInit {
    showToastMessage = &lt;boolean&gt;false;
    toastMessage = &lt;string&gt;'';
    toastClass = &lt;string&gt;'success';
  
    constructor() { }
  
    ngOnInit() {
    }
  
    toggleToastMessage() {
  
      // Show success message &amp; make it disappear after x seconds
      setTimeout(() =&gt; {
        this.showToastMessage = !this.showToastMessage;
  
      }, 5000);
  
    }
  
  }
  </code></pre>
  
  <p><strong>Toast HTML:</strong></p>
  
  <pre><code>&lt;div class="alert toast-message" *ngIf="showToastMessage"&gt;
    {{toastMessage}}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>In addition, here's what I tried:</strong></p>
  
  <ol>
  <li><p>I added <code>MessageToastComponent</code> as a provider in the providers array in <code>app.module.ts</code></p></li>
  <li><p>I injected Toast component as a <strong>dependency</strong> in the Resolver and did the necessary code changes. </p></li>
  <li><p>Tried to visit the Settings page by clicking on the link from the Dashboard page. Instead of showing the Toast upon error, the page is simply routed to the Settings page. <strong>This was unexpected and should not happen, I should never be routed to the Settings page because of the Resolve error.</strong></p></li>
  <li><p>Once in the Settings page, I am able to see the error log in the Browser console, as triggered by the statement <code>console.log(error);</code> in the <code>.catch</code> block.</p></li>
  </ol>
  
  <p><strong>Revised code after injecting the Toast component in the Resolver:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Resolve } from "@angular/router";
  import { Observable } from "rxjs/Observable";
  import { SettingsService } from "../../services/settings/settings.service";
  import { MessageToastComponent } from "../../components/ui/message-toast/message-toast.component";
  
  @Injectable()
  export class SettingsResolverService implements Resolve&lt;any&gt; {
  
    constructor(private settingsService: SettingsService, private toast: MessageToastComponent) {
    }
  
    resolve(): Observable&lt;any&gt; {
      return this.settingsService.getAllSettings()
        .map((res) =&gt; res)
        .catch(error =&gt; {
          console.log(error);
          //alert('Data cannot be retrieved at this time. Please try again later.');
  
          this.toast.showToastMessage = true;
          this.toast.toastMessage = 'There was some error!';
          this.toast.toggleToastMessage();
  
          return Observable.empty();
        });
    }
  
  }
  </code></pre>
  
  <p><strong>My Question:</strong></p>
  
  <p>How can I stay on the Dashboard page and show the Toast message, when the resolve() fails?</p>