Angular Snackbar Implementation

This challenge focuses on creating a reusable snackbar component in Angular. Snackbars are essential for providing concise, non-intrusive feedback to users about an operation's outcome. Successfully implementing this will enhance your Angular development skills in component communication and UI feedback mechanisms.

Problem Description

You need to build a configurable snackbar component that can be triggered from various parts of your Angular application. The snackbar should display a message for a specified duration and ideally offer an option to be dismissed manually.

Key Requirements:

1. Snackbar Component: Create an Angular component (SnackbarComponent) responsible for displaying the snackbar's content.
2. Service for Control: Develop a SnackbarService that will manage the state and visibility of the snackbar. This service should have methods to:
   • Show a snackbar with a given message and duration.
   • Potentially close the snackbar manually.
3. Message Display: The snackbar should display a text message provided to the service.
4. Auto-Dismissal: The snackbar should automatically disappear after a specified duration (e.g., 3 seconds by default).
5. Manual Dismissal (Optional but Recommended): Include a mechanism (e.g., a close button) for users to dismiss the snackbar before the auto-dismissal timer elapses.
6. Global Placement: The snackbar should ideally be placed in a fixed position on the screen (e.g., bottom-center) and be visible on top of other content.
7. Reusability: The SnackbarService should be injectable and usable across different components to trigger snackbars.

Expected Behavior:

When a component calls SnackbarService.show('Your message here'), a snackbar should appear at the bottom of the screen with "Your message here" as the text. After a few seconds, it should fade out and disappear. If a close button is present, clicking it should also make the snackbar disappear immediately.

Edge Cases to Consider:

• Multiple snackbars being triggered in quick succession: How should the service handle this? (e.g., queue them, replace the current one). For this challenge, assume only one snackbar is visible at a time.
• Long messages: How will the snackbar adapt to different message lengths?
• Accessibility: Ensure the snackbar is accessible to users with disabilities.

Examples

Example 1: Showing a basic snackbar

Triggering Component (e.g., AppComponent)

// In some event handler, e.g., a button click
this.snackbarService.show('Operation completed successfully!');

Expected SnackbarComponent Appearance: A small, rectangular box appears at the bottom of the screen containing the text "Operation completed successfully!". After 3 seconds, it fades away.

Explanation: The SnackbarService receives the message and instructs the SnackbarComponent to display it for the default duration.

Example 2: Showing a snackbar with a custom duration

Triggering Component (e.g., AnotherComponent)

// In some event handler
this.snackbarService.show('This message will disappear faster.', 1500); // 1.5 seconds

Expected SnackbarComponent Appearance: A snackbar with the message "This message will disappear faster." appears at the bottom of the screen and disappears after 1.5 seconds.

Explanation: The SnackbarService allows overriding the default duration.

Example 3: Manual Dismissal

Triggering Component (e.g., YetAnotherComponent)

// In some event handler
this.snackbarService.show('You can close this manually.');

Expected SnackbarComponent Appearance: A snackbar appears with the message "You can close this manually." and a small 'X' icon (or similar) on the right side. Clicking the 'X' icon immediately dismisses the snackbar.

Explanation: The SnackbarComponent includes UI elements for manual dismissal, and its click handler communicates back to the service to hide itself.

Constraints

• The solution must be implemented using Angular version 14 or later.
• All code must be written in TypeScript.
• Avoid using third-party UI libraries (like Angular Material) for the snackbar component itself. You should build the basic styling and functionality from scratch or using simple CSS.
• The SnackbarService should be provided at the application level (providedIn: 'root').
• The SnackbarComponent should be dynamically rendered, not included directly in app.component.html from the start. This typically involves using ComponentFactoryResolver or newer Angular features for dynamic component loading.

Notes

• Consider using an observable (Subject) in your SnackbarService to communicate messages and visibility state to the SnackbarComponent.
• For dynamic component loading, you'll need to find a suitable place in your application's root component (AppComponent) to anchor the snackbar. A common pattern is to have a dedicated container element in app.component.html where the snackbar can be appended.
• Think about how the SnackbarComponent will receive the message and duration, and how it will signal back to the service when it needs to be closed manually.
• Basic CSS styling will be required to make the snackbar look like a typical snackbar (positioning, background, padding, etc.).