title: Angular2 Toggle Class in child component using a click event in parent component
body: <p>I am trying to toggle a class on/off using a click event, the problem I am running into is that my click event is in the parent component while the Class is in the child component. I am able to initialize the child with the class using @Input() decorator but I am unable to toggle the class afterwards</p>
  
  <pre><code>import { Component, AfterViewInit, Input, OnInit } from '@angular/core';
  import { SidebarComponent } from './components/sidebar/sidebar.component';
  
  @Component({
     moduleId: module.id,
     selector: 'body',
     host: {
        '[class.navMdClass]' : 'navMdClass',
        '[class]' : 'classNames'
     },
     templateUrl:'app.component.html' ,
     directives:[SidebarComponent],    
  })
  export class AppComponent implements OnInit {
     private isClassVisible:boolean;
     constructor () {    
  
     }
     ngOnInit() {
        this.isClassVisible=true;
     }
     toggleClass() {
        this.isClassVisible = !this.isClassVisible;       
     }
  }
  //Child component
  import { Component, Input, EventEmitter, OnInit,SimpleChange } from '@angular/core';
  @Component({
      moduleId: module.id,
      selector: 'sidebar',
      templateUrl:'sidebar.component.html' 
  })
  
  export class SidebarComponent implements OnInit{
      @Input() isClassVisible:boolean;
  
  ngOnInit() { }
  }
  //Parent click event triggers toggleClass
  &lt;div class="nav toggle"&gt;
            &lt;a (click)="toggleClass();" href="#" id="menu_toggle"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
  //Child div where target class is
  &lt;div class="left_col" [class.scroll-view]="[isClassVisible]" &gt;
  </code></pre>