I&#39;m using `@input` to receive a property from parent component in order to activate a CSS class in one of child component&#39;s element.

I&#39;m able to receive the property from parent and also activate the class. But this works only once. The property i&#39;m receiving from parent is a boolean data typed and when I set the status of it to `false` from child component, it does not change in parent. 

Plunkr: [https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview][1]

**app.ts**

    import {Component, NgModule} from &#39;@angular/core&#39;
    import {BrowserModule} from &#39;@angular/platform-browser&#39;
    import { HeaderComponent } from &#39;./header&#39;;
    import { SearchComponent } from &#39;./header/search&#39;;
    
    @Component({
      selector: &#39;my-app&#39;,
      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 {}

**header.ts**

    import { Component, OnInit } from &#39;@angular/core&#39;;
    
    @Component({
      selector: &#39;app-header&#39;,
      template: `&lt;header&gt;
                  &lt;app-search [getSearchStatus]=&quot;isSearchActive&quot;&gt;&lt;/app-search&gt;
                  &lt;button (click)=&quot;handleSearch()&quot;&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() { }
    }

**header/search.ts**

    import { Component, OnInit, Input } from &#39;@angular/core&#39;;
    
    @Component({
      selector: &#39;app-search&#39;,
      template: `&lt;div id=&quot;search&quot; [class.toggled]=&quot;getSearchStatus&quot;&gt;
                  search 
                  &lt;button  (click)=&quot;getSearchStatus = false&quot; class=&quot;close&quot;&gt;Close Search&lt;/button&gt;
                &lt;/div&gt;`
    })
    export class SearchComponent implements OnInit {
      @Input() getSearchStatus: boolean;
    
      constructor() { }
    
      ngOnInit() {
    
      }
    }


  [1]: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

Please check the above given plunker. The open search function works only once. After closing the search, it does not trigger again. 

Is `@input` is the proper use case for this scenario? Please help me fix this. (Please update the plunker).

All Angular2 Inputs Solutions on Gang of Coders

Total of 1 Angular2 Inputs Solutions

Update parent component property from child component in Angular 2