title: Class toggle doesnt work inbetween components Angular 4
body: <p>Hey so I have a hamburger menu that on click obviously gets an <code>is-active</code> class and that class toggles depending on the click, my problem is that it works when I'm on my home page, and then when I click to another page via <code>routerLink</code> it works but then when I click on to a second page it removes the class <code>is-active</code> as programmed but then when I click it again it doesn't add the class <code>is-active</code> but if I click it again <code>is-active</code> is applied... this also happens if Ive started on a page that isn't home Ill click the hamburger nothing happens and If I click it again the <code>is-active</code> class is applied I'm not sure what is happening here if anyone knows it would be a big help</p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;div class="nav-page"&gt;
    &lt;a routerLink="/"&gt;&lt;img class="img" src="../assets/img/nav-logo.svg" /&gt;&lt;/a&gt;
    &lt;ul (click)="navLinkClick()" class="nav-page_ul"&gt;
      &lt;a [routerLink]="['who-we-are']"&gt;&lt;li&gt;who we are&lt;/li&gt;&lt;/a&gt;
      &lt;a [routerLink]="['our-technology']"&gt;&lt;li&gt;our technology&lt;/li&gt;&lt;/a&gt;
      &lt;a [routerLink]="['our-work']"&gt;&lt;li&gt;our work&lt;/li&gt;&lt;/a&gt;
      &lt;a [routerLin]k="['get-in-touch']"&gt;&lt;li&gt;contact us&lt;/li&gt;&lt;/a&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="nav-page-btn"&gt;
      &lt;div (click)="hamburgerClick()" [ngClass]="wasClicked ? 'is-active' : ' '" class="hamburger hamburger--spring"&gt;
          &lt;div class="hamburger-box"&gt;
            &lt;div class="hamburger-inner"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Router, Event, NavigationStart } from '@angular/router';
  import { NgIf } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    routeHidden = true;
  
    title = 'app';
  
    wasClicked = false;
  
    constructor(private router: Router)
    // tslint:disable-next-line:one-line
    {}
  
    // tslint:disable-next-line:use-life-cycle-interface
    ngOnInit() { }
  
    hamburgerClick() {
      this.wasClicked = !this.wasClicked;
    }
  
    navLinkClick() {
      this.wasClicked = !this.wasClicked;
    }
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>So something weird that is happening is.. </p>
  
  <p>If I remove <code>(click)="hamburgerClick()"</code> the button works as expected on every page except the home page, but obviously I need the button work on the homepage and then also use the function to open the nav</p>