angularangular-decoratorangular-input

Problem with @Input property change an Angular 6

I have a problem where I am trying to implement an accordion using angular and css only with expand all and collapse all. Expand All/ Collapse All links are in parent component where as the accordions are in child component. On click of expand all/ collapse all property of child will change via @input variable. Here is snippet of code

Now Prob is when I am loading the page content of accordion is active.. works fine... Click collapse .. all accordion hides .. works fine... click one of the accordion (on panel header).. it expands by changing the panelHide property... works fine...

Now the problem arrises when I again click on collapse all link. It should set the @Input panelHide again, and accordion should collapse.. but it doesn't...Nothing happens.. Seems it preserve its original state. And the code fails..

parent.component.html

<a (click)="expandAll(true)">Expand All</a>
<a (click)="expandAll(false)">Collapse All</a>

<child-component [isAllCollapsed]="isAllCollapsed"></child-component>

parent.component.ts

isAllCollapsed:boolean=false;

expandAll(action:boolean){
this.isAllCollapsed=action
}

Child.component.html

<div [ngClass]="'is-active':!panelHide">
<a (click)="panelHide=!panelHide">Panel Header</a>
<div>
Panel Content--- hide and show according to is-active class, with help of css.
<div>
</div>

child.component.ts

@Input('isAllCollapsed') panelHide:boolean;

I have tried ngOnChanges.. Changes does not show any changes on panelHide, once I click Collapse all for the second time... as described above.

Solution

  • I think when you are doing panelHide=!panelHide you're losing the reference to the object, so your input and your panelHide aren't the same object anymore.

    You should probably create an Observable (in a service used in your parent component as well as your children components) which emits when you click your "all" buttons and is subscribed to in your children components.