Angular2 - toggle another element based on an event from a child component

Question

I have a component which has this child:

<fb-customer-list (inSearchMode)="listIsInSearchMode = event$"></fb-customer-list>

As you can see, it listens to an event from that child, which is just a boolean value (indicates whether the child changed modes).

In the parent, I am trying to hide a div based on this boolean:

<div class="center fade" *ngIf="!listIsInSearchMode">

But this only works the first time the boolean changes. After that, this div is always hidden. I know that ngIf removes directly from the DOM, but surely when the event becomes true again, it should be re-added.

I also tried applying style.visibilty based on the bool, and also using the hidden attribute...but both give the same result.

I can see the event changing from true to false in the child, but it seems after the first time the parent does not?

Gili Yaniv · Accepted Answer · 2016-12-21 08:56:34Z

1

I'm not sure if this is the problem, but you should write $event and not event$.

Is the div having the *ngIf is wraping the fb-customer-list component? If so, You can't listen to callback from children that are not 'alive'.

edited Dec 21, 2016 at 8:56

answered Dec 20, 2016 at 17:41

Gili Yaniv

3,2513 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rmcsharry Over a year ago

Thanks, something so obvious but I could not see the wood from the trees! $event is the fix, thank you so much :)

Collectives™ on Stack Overflow

Angular2 - toggle another element based on an event from a child component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related