Hide components in Angular

I'm trying to hide a custom component in Angular. I have a children and parent component, the child component is inside the template of the parent:

<comp (add) = "onAdd($event)"> </comp>

So, when i'm trying to hide the component, it works. It works with writing hidden in the tag or setting display : none or with ngIf.

But the problem is, when i'm hiding the component the event doesn't work (->(add) = "onAdd($event)") The data which im passing from children to parent is important for services, so i need a solution to hide the component without losing the data which is passed.

The data is passed with EventEmitter from child component.

Thank you in advice.


1 Answers Hide components in Angular

Well, the key, in this case, would be to emit from the Child Component during the change. Something along the lines of this can be achieved in the ngOnChanges in the Child Component while passing some @Input data to the ChildComponent from your Parent Component.

I've created a Sample StackBlitz to demo this.

But that's not the case in most of the scenarios. In most of the cases, you generally emit from the Child Component when the user interacts with the Child's Template. But since the user will not see the Child in the first place, it won't really be possible as mentioned in the comments.

4 months ago