title: Browser back and forward button for each step in Angular material Stepper
body: <p>I have a stepper that loads child components.</p>
  
  <p>I want the user to be able to press the browsers back and forward button when they want to go back or forward a step.</p>
  
  <p>My guess is using the <code>Location</code> service in <code>@angular/common</code> and storing it the history.</p>
  
  <pre><code>import { Component, OnInit, ViewChild} from '@angular/core';
  import { Location } from '@angular/common';
  
  @Component({
    selector: 'app-vehicle',
    templateUrl: './vehicle.component.html',
    styleUrls: ['./vehicle.component.css']
  }) 
  
  export class VehicleComponent implements OnInit {
  @ViewChild('stepper') stepper;
  
  ngOnInit() {
    this.location.subscribe(x =&gt; {
    this.stepper.selectedIndex = this.stepper.selectedIndex -1;
   });
  }
  
  // this adds that path to the url. I dont use path changes as params.
  onVehClick() {
  this.location.go(this.location.path() + '/vehicle');
   }
  
  onTypeclick() {
  this.location.go(this.location.path() + '/vehicle/jetski');
   }
  }
  </code></pre>
  
  <p>This works but I get an error in the console log </p>
  
  <blockquote>
    <p>Error: Uncaught (in promise): Error: Cannot match any routes. URL
    Segment: 'service/vehicle/'</p>
  </blockquote>
  
  <p>This is because there is no route, it's cosmetic and serves only the purpose of pressing the browsers back button. </p>
  
  <ol>
  <li><p>Can I have functionality like this without parsing the URL checking for the params I used? My guess is you do.</p></li>
  <li><p>The forward button doesn't work because of the same reason i get an error with the back button. Im starting to think they only way to have the forward is take the path as query params. is this true?</p></li>
  <li><p>Can i somehow stop the forward button or redirect it somewhere else? </p></li>
  </ol>
  
  <p>In fact, all i want is to make the back button or forward button doesn't leave that vehicle component.</p>