title: How can i target a click event to another component in Angular 2
body: <p>I have 2 components the main app.component and a header.component now I want to put a button in the header that toggles a class to be active in the main app.component Ive got the button working in the app.component but I want to move the button to the header component but with the same functionality</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;button type="button" id="sidebarCollapse" class="btn btn-primary" 
  (click)="togglesideBar(); toggleSign();"&gt;
          &lt;i class="glyphicon glyphicon-{{sign}}"&gt;&lt;/i&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;!--Chat Side Bar--&gt;
      &lt;div id="chatsidebar" [ngClass]="{'active': isSideBarActive}"&gt;
          &lt;app-chatsidebar&gt;&lt;/app-chatsidebar&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>APP.COMPONENT.TS</p>
  
  <pre><code>sign = 'chevron-right';
  
  toggleSign() {
      if (this.sign === 'chevron-right') {
          this.sign = 'chevron-left';
      } else {
          this.sign = 'chevron-right';
      }
  }
  
  togglesideBar() {
      this.isSideBarActive = !this.isSideBarActive;
  }
  </code></pre>
  
  <p>I tried putting the same functions in the header.component.ts and putting the same button in the header.component.html but it didnt seem to work</p>
  
  <p>Any help would be appreciated!
  Thanks</p>