• In an Angular application I have a Service S responsible for opening a Component C MatDialog;
• I want C, in its turn, to have a reusable header component, say Component H;
• I want H to have a button for closing a MatDialog (which is the case of C);

So I tried:

• Keeping MatDialogRef as a property of S, so I would import it from H and call its close method, but then I’m running into a circular dependency (S -> C -> H -> S) and H tightly coupled with the S -> C structure.
• Emiting an event with @Output() from H to C, and that decouples H, but then I still can’t inject the service into C, because circular dependency (S -> C -> S)

I suspect I am thinking this all wrong. Is there a standard way of doing this, so I avoid a circular dependency while H is ideally decoupled from C?