Angular Dialog Service Implementation

This challenge asks you to create a reusable dialog service in Angular. A dialog service provides a standardized way to display modal windows (dialogs) within your application, encapsulating the logic for opening, closing, and managing dialog content. This promotes code reusability and a consistent user experience.

Problem Description

You need to implement an AngularDialogService that allows components to easily display and interact with dialogs. The service should handle the creation and management of a dialog component, allowing the calling component to pass in a title, content (which can be any Angular component), and an optional close button label. The dialog should be displayed as an overlay on top of the main application content. The service should provide methods to open and close the dialog. When the dialog is closed (either by clicking outside the dialog, pressing the escape key, or clicking a close button), the calling component should be notified.

Key Requirements:

• Open Dialog: A method openDialog(title: string, content: TemplateRef<any> | ComponentRef<any>, closeButtonLabel?: string): void to open a dialog. title is the dialog's title. content is the Angular template or component to display within the dialog. closeButtonLabel is an optional label for the close button.
• Close Dialog: A method closeDialog(): void to close the currently open dialog.
• Dialog Component: A simple dialog component (dialog.component.ts and dialog.component.html) that displays the title, content, and close button. The close button should trigger the closeDialog() method on the service.
• Overlay: The dialog should be displayed as an overlay on top of the main application content, dimming the background.
• Click Outside to Close: Clicking outside the dialog should close the dialog.
• Escape Key to Close: Pressing the Escape key should close the dialog.
• Notification on Close: The service should emit an event when the dialog is closed, allowing the calling component to react.

Expected Behavior:

1. When openDialog() is called, the dialog component should be created and displayed as an overlay.
2. The dialog's title, content, and close button label (if provided) should be correctly displayed.
3. Clicking the close button, clicking outside the dialog, or pressing the Escape key should close the dialog.
4. When the dialog is closed, the closeDialog() event should be emitted.

Edge Cases to Consider:

• What happens if openDialog() is called multiple times without closing the previous dialog? (Should only one dialog be open at a time).
• How to handle different types of content for the dialog (templates vs. components).
• Accessibility considerations (e.g., keyboard navigation, screen reader compatibility).

Examples

Example 1:

Input: openDialog('Confirmation', TemplateRef<any> containing a simple message, 'Confirm')
Output: A dialog appears with the title "Confirmation", the message content, and a close button labeled "Confirm". Clicking the close button closes the dialog and emits the closeDialog() event.
Explanation: The service creates and displays a dialog with the provided title, content, and close button label.

Example 2:

Input: openDialog('Error', MyCustomComponent, undefined)
Output: A dialog appears with the title "Error" and the content rendered from MyCustomComponent. There is no close button label. Clicking outside the dialog or pressing Escape closes the dialog and emits the closeDialog() event.
Explanation: The service creates and displays a dialog with the provided title and a component as content.

Example 3: (Edge Case)

Input: openDialog('First Dialog', TemplateRef<any>) then openDialog('Second Dialog', TemplateRef<any>) then closeDialog()
Output: Only the "First Dialog" is displayed. Calling closeDialog() closes the "First Dialog" and emits the closeDialog() event.
Explanation: The service ensures that only one dialog is open at a time.

Constraints

• The dialog component should be a simple, reusable component.
• The service should be injectable and usable in any Angular component.
• The overlay should cover the entire screen, dimming the background.
• The service should not rely on external libraries for dialog management (e.g., Angular Material Dialog).
• The solution should be well-structured and follow Angular best practices.

Notes

• Consider using ComponentRef and ViewContainerRef to dynamically create and insert the dialog content.
• You can use a simple CSS overlay to dim the background.
• Use an EventEmitter to notify the calling component when the dialog is closed.
• Think about how to handle the lifecycle of the dialog component (creation, destruction).
• Focus management is important for accessibility. Ensure the dialog receives focus when it opens.