Currently, I am utilizing the @input feature to obtain a property from the parent component. This property is used to activate a CSS class within one of the child components.
Although I am successful in receiving the property and activating the class initially, it seems to work only once. The property received from the parent is of boolean data type. When I attempt to change this status to false from the child component, it does not reflect back in the parent component.
To see the code in action, you can check out this Plunkr: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview
app.ts
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: `
<app-header></app-header>
`,
})
export class App {
name:string;
constructor() {
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, HeaderComponent, SearchComponent ],
bootstrap: [ App ]
})
export class AppModule {}
header.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
template: `<header>
<app-search [getSearchStatus]="isSearchActive"></app-search>
<button (click)="handleSearch()">Open Search</button>
</header>`
})
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 '@angular/core';
@Component({
selector: 'app-search',
template: `<div id="search" [class.toggled]="getSearchStatus">
search
<button (click)="getSearchStatus = false" class="close">Close Search</button>
</div>`
})
export class SearchComponent implements OnInit {
@Input() getSearchStatus: boolean;
constructor() { }
ngOnInit() {
}
}
While examining the provided plunker, you'll notice that the open search function stops working after the first usage. Following the closure of the search, attempting to trigger it again proves to be ineffective.
My query pertains to whether using @input is fitting for this particular scenario. Any assistance in rectifying this issue would be greatly appreciated. (Please update the Plunker with solutions.)