Hide blocks on click outside area without overlay in angular. How can it be implemented?

Question

Angular

Good day. Actually a subject.
There are many different popups that need to be hidden on click outside of their area.
- date selection window
- user menu
- geocoordinates window
- etc.
You need to somehow hide all this disgrace if there was a click outside the area of ​​the element itself, for example, a window with a date selection.
The difficulty lies in the fact that you need to do without a background on which you could hang (click)="close()". You also need to make friends with the components in order to work globally and at the same time every click is not processed if the windows are not open.
The windows themselves are currently opened like this:
In the global file global.module.ts there is an export class Globals which contains the following values:
public openPupUp: boolean = false;
Global because it can be used multiple times on different pages.
In general, when a window is called, false is changed to true and a class is added to the called window.
How can I handle a click on an area outside the window?
There are situations when you need to switch from a date picker, for example, to a search input and the date should hide.
Overlay solves this problem, but you have to double-click on the input, which is not very good.