title: Update parent component property from child component in Angular 2
body: <p>I'm using <code>@input</code> to receive a property from parent component in order to activate a CSS class in one of child component's element.</p>
  
  <p>I'm able to receive the property from parent and also activate the class. But this works only once. The property i'm receiving from parent is a boolean data typed and when I set the status of it to <code>false</code> from child component, it does not change in parent. </p>
  
  <p>Plunkr: <a href="https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview" rel="noreferrer">https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview</a></p>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>import {Component, NgModule} from '@angular/core'
  import {BrowserModule} from '@angular/platform-browser'
  import { HeaderComponent } from './header';
  import { SearchComponent } from './header/search';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;app-header&gt;&lt;/app-header&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
    }
  }
  
  @NgModule({
    imports: [ BrowserModule ],
    declarations: [ App, HeaderComponent, SearchComponent ],
    bootstrap: [ App ]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>header.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-header',
    template: `&lt;header&gt;
                &lt;app-search [getSearchStatus]="isSearchActive"&gt;&lt;/app-search&gt;
                &lt;button (click)="handleSearch()"&gt;Open Search&lt;/button&gt;
              &lt;/header&gt;`
  })
  export class HeaderComponent implements OnInit {
    isSearchActive = false;
  
    handleSearch() {
      this.isSearchActive = true
      console.log(this.isSearchActive)
    }
  
    constructor() { }
    ngOnInit() { }
  }
  </code></pre>
  
  <p><strong>header/search.ts</strong></p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-search',
    template: `&lt;div id="search" [class.toggled]="getSearchStatus"&gt;
                search 
                &lt;button  (click)="getSearchStatus = false" class="close"&gt;Close Search&lt;/button&gt;
              &lt;/div&gt;`
  })
  export class SearchComponent implements OnInit {
    @Input() getSearchStatus: boolean;
  
    constructor() { }
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p>Please check the above given plunker. The open search function works only once. After closing the search, it does not trigger again. </p>
  
  <p>Is <code>@input</code> is the proper use case for this scenario? Please help me fix this. (Please update the plunker).</p>