Changing @Input() in child compoent properties prevents further updates from parent component

Question

I have 2 components - Parent and Child. Please see stackblitz demo Parent's template looks like below -

When 'Show Child' is clicked, isChild1Visible is set to true causing the Child component to display its template.

When you click 'Hide me' the Child component sets isVisible to false, causing it to be hidden. Now when 'Show Child' is clicked again, the child component is not shown.

I add ngOnChanges() in the Child component to see the change detection, however I see the below When child component is initialized:

After 'Show me' is clicked for 1st time

After 'Hide me' is clicked, the ngOnChanges() does not print anything even when 'Show me' is clicked later on.

So, why does change detection stop working after input property is update in the child component?

Answer 1

The issue

The first time you set isChild1Visible, with the one way binding it also sets the child isVisible to true.

From the inside, you set isVisible to false, so the div disappears as you have *ngIf="isVisible".

However, the outer isVisible is still true!

When you hit again the outer button, there's no changes to detect as the value remains the same, so nothing is passed to the child.

See this stackblitz demo with both booleans exposed.

Option 1: Explicitly listen to on output

If you want to control a component from the outside, you should keep the logic outside.

A possible way is to add an @Output on your child that is an EventEmitter that emits when you want to close the child.

The parent will listen to that event and do something, like setting isVisible to false.

You can see it on this updated stackblitz.

Option 2: Two-way binding

Similar to solution Option 1, you can create an emitter called with the same name of your input, ending with Change and trigger there your change.

In this case you only need to replace the binding with [(isVisible)]="isChild1Visible" and add isVisibleChange as @Output EventEmitter<any>.

Demo on stackblitz.