title: Angular 2 Click Event: Change image, then change route
body: <p>I am trying to change a button image src AND route the user to another page on click. Here is what I have tried.</p>
  
  <p><strong>home.component.html</strong></p>
  
  <pre><code>&lt;button class="hexagon"
          (click)="gotoFinishing()"&gt;
      &lt;img [src]="imgsrc"&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p><strong>home.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  
  @Component({
      templateUrl: 'home.component.html'
  })
  export class HomeComponent {
  
      constructor( private router: Router) { }
  
      imgsrc="test.png";
  
      gotoFinishing(){
          this.imgsrc="test2.png";
          let link = ['/finishing'];
          this.router.navigate(link);
      }
  }
  </code></pre>
  
  <p>It does not change the image src, but it does route the user to the correct page. Is there a way to do this? </p>
  
  <p>Thanks!</p>