Implementing a Customizable Snackbar in Angular

This challenge focuses on building a reusable and customizable Snackbar component in Angular. Snackbars are commonly used to display brief, non-blocking messages to the user, providing feedback on actions or displaying important information. Successfully completing this challenge will demonstrate your understanding of Angular component creation, template binding, and event handling.

Problem Description

You are tasked with creating an Angular component that implements a Snackbar. The Snackbar should be triggered programmatically and display a message to the user. It should also include options for customization, such as the message text, duration, and potentially an action button. The Snackbar should automatically dismiss after a specified duration or when the action button (if present) is clicked.

Key Requirements:

• Triggering: The Snackbar should be triggered from a parent component using an input property.
• Message Display: The Snackbar should display the message provided as input.
• Duration: The Snackbar should automatically dismiss after a specified duration (defaulting to 3 seconds). This duration should be configurable via an input property.
• Action Button (Optional): The Snackbar should optionally display an action button. If provided, the button should trigger an event that the parent component can listen to.
• Dismissal: The Snackbar should dismiss when the duration expires or when the action button is clicked.
• Visibility: The Snackbar should be initially hidden and only visible when triggered.

Expected Behavior:

1. When the showSnackbar input property is set to true, the Snackbar should become visible.
2. The Snackbar should display the message provided via the message input property.
3. After the duration specified by the duration input property (in milliseconds), the Snackbar should automatically dismiss and showSnackbar should be set back to false.
4. If an action input property is provided, a button with the specified text should be displayed. Clicking this button should emit the actionClicked output event.
5. Clicking anywhere outside the Snackbar (besides the action button) should also dismiss the Snackbar and set showSnackbar to false.

Edge Cases to Consider:

• What happens if duration is set to 0 or a negative value? (Should default to a reasonable value, like 3 seconds).
• How should the Snackbar handle very long messages that might overflow the container? (Consider truncation or scrolling). For this challenge, truncation is acceptable.
• What happens if action is provided but the actionClicked output is not handled in the parent component? (The button should still function correctly, but the parent component won't receive the event).

Examples

Example 1:

Input: Parent component sets showSnackbar = true, message = "Operation successful!", duration = 2000, action = "Dismiss"
Output: Snackbar appears with the message "Operation successful!" and a button labeled "Dismiss". After 2 seconds, the Snackbar disappears. Clicking the "Dismiss" button also makes the Snackbar disappear.
Explanation: The Snackbar is triggered and displays the provided message and action button. The timer automatically dismisses the Snackbar after the specified duration.

Example 2:

Input: Parent component sets showSnackbar = true, message = "Please wait...", duration = 5000, action = null
Output: Snackbar appears with the message "Please wait...". After 5 seconds, the Snackbar disappears. There is no action button.
Explanation: The Snackbar is triggered and displays the provided message.  Since no action is provided, no button is rendered. The timer automatically dismisses the Snackbar.

Example 3: (Edge Case)

Input: Parent component sets showSnackbar = true, message = "Very long message that needs to be truncated...", duration = 3000, action = "Close"
Output: Snackbar appears with the message "Very long message that needs to be truncated..." (truncated to fit). A button labeled "Close" is displayed. After 3 seconds, the Snackbar disappears. Clicking the "Close" button also makes the Snackbar disappear.
Explanation: The Snackbar handles a long message by truncating it to fit within the container.

Constraints

• The Snackbar component should be self-contained and reusable.
• The Snackbar should not block the user from interacting with the rest of the application.
• The Snackbar's styling should be flexible and easily customizable through CSS. (No specific styling requirements are given for this challenge, focus on functionality).
• The duration should be in milliseconds.
• The component should be written in TypeScript.

Notes

• Consider using Angular's @Input() and @Output() decorators to handle input and output properties/events.
• Use setTimeout() to implement the automatic dismissal timer.
• You can use Angular's *ngIf directive to control the visibility of the Snackbar.
• Think about how to handle the click outside the Snackbar to dismiss it. You might need to use a host listener.
• Focus on the core functionality of the Snackbar. Advanced features like animations or different themes are not required for this challenge.