How to hide a component from the outside?

Question

Angular

In the main component, a component with a div block is inserted, which has an absolute position relative to the parent.

The block can be opened and hidden by clicking:

public show = false;

showHide() {
    this.show = !this.show;
}

How to hide this block from the outside? For example when the user focuses on another component? Now the block overlaps the work area, which interferes with work. I don't want to create a service

for one variable ...show

Answer 1

if I understand the question correctly...

@Input()
set showOutside(show) {
this.show = show;
}

well, and accordingly pass outside to the component input something like [showOutside]="true"

Answer 2

I don't want to create a service for one show variable...

but in vain. A service for one subject, such as an event bus, is quite normal.
The more specific the functionality of the service, the better.