title: How to pass variables through components Angular 2
body: <p>I have my <code>header component</code> that has a function to toggle a class on click, this works perfectly inside the header component, but I want to pass that behavior to my <code>nav component</code> that adds the classes according on this event.</p>
  
  <p><strong>My question:</strong></p>
  
  <p>How can I access these variables inside <code>nav component</code>?</p>
  
  <p><strong>Desired behavior:</strong></p>
  
  <p>What I want is to be able to add css clases when I click on toggleMenu  </p>
  
  <p><strong>Code:</strong></p>
  
  <p>Header Component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
  })
  
  export class HeaderComponent implements OnInit {
  
    private showOpened : boolean;
  
    constructor() {
  
    }
  
    ngOnInit() {
     this.showOpened = false;
    }
  
  
    toggleMenu() {
      this.showOpened = !this.showOpened;;
    }
  }
  </code></pre>
  
  <p>Header HTML:</p>
  
  <pre><code>&lt;div class="header-container"&gt;
    &lt;header class="wrapper clearfix"&gt;
      &lt;h1 class="logo"&gt;---&lt;/h1&gt;
      &lt;input type="checkbox" class="checkbox-menu" id="menu-toogle"&gt;
      &lt;label for="menu-toogle" class="menu-toogle" (click)="toggleMenu()"&gt;&lt;/label&gt;
      &lt;div class="bar" [class.animate]="showOpened"&gt;&lt;/div&gt;
      &lt;span class="icon-search"&gt;&lt;/span&gt;
    &lt;/header&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Nav Component </p>
  
  <pre><code>import { Component, Input, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.scss']
  })
  
  export class NavComponent implements OnInit {
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>Nav HTML</p>
  
  <pre><code>&lt;nav [class.open-menu]="showOpened"&gt;&lt;/nav&gt;
  </code></pre>