title: How to use Angular Routing to differentiating Back, Forward, and refresh browser events
body: <p>I have a requirement for an Angular web application that defines capturing the Back, Forward, and Refresh navigation events so that custom routing functions can be applied. I have found many answers in Stack Overflow and other Google searches that define using Angulars routing Navigation Events. However, they do not describe a solution for differentiating between Back and Forward events. All back and Forward events are set as <code>popstate</code> within the event object regardless of which browser button is pressed.</p>
  <p>See <a href="https://www.bennadel.com/blog/3533-using-router-events-to-detect-back-and-forward-browser-navigation-in-angular-7-0-4.htm" rel="nofollow noreferrer">this solution</a> I implemented in my own project to capture Router Events.</p>
  <p>The router event returns four attributes:</p>
  <ul>
  <li><code>navigationTrigger</code>: <code>popstate</code> for forward/back or <code>imperative</code> for new router path</li>
  <li><code>id</code>: the index of the new router path</li>
  <li><code>url</code>: url of the new router path</li>
  <li><code>restoredState</code>: object for the router state being restored if <code>popstate</code> is executed.</li>
  </ul>
  <p>the only idea I have so far is to somehow create a data object or algorithm to use the restored state to determine which button was pressed.</p>
  <p>So my question(s) is/are:</p>
  <ul>
  <li><strong>Is there a way built into Angular to differentiate these events?</strong></li>
  <li><strong>If not what might be the best way for creating a method to do this?</strong></li>
  </ul>