I'm trying to hide a popup on button click in an angular app. I open the popup in a component, therefore I imported this component into the popup content component (where I have a close button) in order to get access to the popup itself. I registered a click event, which should close the popup. But if I click the close button, nothing happens.
You can find the stackblitz here: https://stackblitz.com/edit/angular-dxpopup-vffzdr
I wouldn't go about this the way you're doing it.
You are feeding an instance of the app component, into sender component. Architecturally I would say, that's dicey. In terms of components in Angular, constructors are generally used for injection. I understand there's room for interpretation there, but I can definitely say in creating probably hundreds of components, I can't recall passing data or other component references (particular the app) into the component via the constructor. Injection only. Otherwise you can end up with references that can't get cleaned up and other problems of all sorts. Generally, inputs and services are how you pass data into components.
What I would do, is create an output in sender component, "closeClicked", or some such. When the click button is fired, that output is triggered (so an EventDispatcher fires an event, "Hey my close button was clicked!!!").
Then, when you use senderComponent (which you do in app.component.html), you set up a handler for that output (so this would be in your app.component.ts). Now, when you click close, sender component will tell app.component, "my close button was clicked."
In app.component.ts, you can now reference the DX component via a template variable and call hide (if that component has an API for hiding it), or you could just set an *ngIf="hide_sender_visible" in the dx element markup, and toggle hide_sender_visible to true or false, depending on what you need it to do.
Architecturally, it is almost never (possibly never ever) a good idea to feed a parent into its children. It is better to use a service or input to feed info in, or a service or output to feed data out. If you look up "component communication angular" online you'll find a billion articles on the subject that all basically say the same.
Anyways, you could probably fix it the way it is to get it to work. But I can tell you with reasonable confidence, if you submitted that as a code sample at an interview, the first question you'd probably have to dance around would be, "why didn't you just use an output and hide the element, or call the component api via a template ref?"