How do I use an output value to show or hide the same component?

Question

I'm getting an output boolean value from a child component in html. Now I need to use the same value to hide that same tag where I'm getting it.

<!-- where I get the value. -->
<app-pcomponent (outageEvent)='receiveEvent($event)'></app-pcomponent> 

...

receiveEvent($event) {
    this.value = $event as boolean;
}

I need to use the same value ie $event/this.outage to show or hide the same component <app-pcomponent> .

Answer 1

just a short recap: Your child component has a async call. The result of that call decides if the child should be shown.

There are quite a few things that are relevant:

1. The code in a component (in ngOnInit or in the constructor) will only be executed when the component is shown at least ones.

2. If you subscribe in a component some observable, it is a best practice to unsubscribe later (at least, when the component is destroyed). This is to safe guard yourself from memory leaks and "funny" behavior. Because if you don´t do that, and the user proceeds to some completly different pages in your application, then the subscription will STILL kick in. That means, that your async call (to the backend ?) will still be executed every few minutes.

3. if you "hide" your component by an *ngIf, then you do not hide it, you delete it from the DOM. As a result the "ngOnDestroy" method will be called. Thats the one where i would in most cases unsubscribe my subscriptions. With the destruction of your child component, the parent component will not get any notice about the async result. That means the *ngIf will stay false for ever...
4. if you "hide" your component by the HTML attribut "hidden" '''''' then the component will be created, but not visible for the user. As a result all codings (like the async call) will get executed. On the downside, even if this component is not currently shown, it will eat computation time (for the digestive cycle and everything else). Therefor it is a best practice to use "hidden" with care and try to avoid it where possible.

My personal solution would be to create two components. The first child will handle the async call. It will (depending on the result of the call) show the second component. Thats the one with all the nice content.

As a result nothing from my components leak outside to the outer parent. My First component has only the task to handle the call and depending on the result show the child (the second component). If the second component needs data from the async call, it will be provided by a @Input() into the second component.

My personal best practice: Components are cheap, use them to seperate your code, make that way clean and maintainable.

warm regards Jan

Answer 2

You can use *ngIf

<app-pcomponent (outageEvent)='receiveEvent($event)' *ngIf="value"></app-pcomponent>

receiveEvent(value: boolean) {
  this.value = value;
}