title: Override browser `back` button functionality in Angular?
body: <p>I have a page in my <code>Angular</code> App where it uses a <code>stepper</code>. When the user is for example on step 3, the first logical thing he will do to get back to the previous step (step 2) is to click on the <code>back button</code>. But obviously, he will get redirected to the previous page.</p>
  <p>So, I would be able to set the <code>stepper</code> to previous on back click instead of redirecting the user to last page and when he is on <strong>step 1</strong> redirect him to last page.</p>
  <p>I was trying to use <code>@HostListener</code> by casting <code>this.stepper.previous();</code> (function which set the stepper to previous) but while the action is <code>catched</code> the function is not executed and the page is anyway redirected back.</p>
  <p><strong>So how can i prevent the page to get redirected on back button click?</strong></p>
  <p>Here is what I've tried:</p>
  <pre class="lang-js prettyprint-override"><code>@HostListener( 'window: popstate', ['$event'])
  onPopState(event: Event): void {
    event.preventDefault();
    console.log(&quot;BACK PRESSED&quot;)
    this.stepper.previous();
  }
  </code></pre>