Building a Reusable Standalone Alert Component in Angular

This challenge focuses on creating a self-contained and reusable UI element in Angular. You will build a "Standalone Alert" component that can be easily integrated into any Angular application without the need for additional module declarations. This is a fundamental skill for modern Angular development, promoting better organization and reusability of your UI.

Problem Description

Your task is to create a new Angular component named StandaloneAlertComponent. This component should be a standalone component, meaning it does not belong to any Angular module. It should accept input properties to customize its appearance and content, and it should render an alert message to the user.

Key Requirements:

• Standalone Component: The component must be marked as standalone: true in its decorator.
• Input Properties:
  • message: A string representing the alert message to be displayed. (Required)
  • type: A string that determines the alert's styling. Accepted values are 'success', 'warning', 'danger', and 'info'. Defaults to 'info'.
  • dismissible: A boolean that, if true, adds a close button to the alert. Defaults to false.
• Styling: Apply basic inline styles or CSS classes to differentiate the alert types (e.g., different background colors). You can assume basic CSS classes like alert, alert-success, alert-warning, alert-danger, alert-info, and alert-dismissible are available in the host application's global styles or will be provided.
• Dismissible Functionality: If dismissible is true, the component should render a close button (e.g., an 'X' icon). Clicking this button should hide the alert message. You can emit an event to notify the parent component when the alert is closed.
• Output Event: If the alert is dismissible, emit an event named closed of type EventEmitter<void> when the close button is clicked.

Expected Behavior:

• A basic alert with a message and default styling (info) should be rendered.
• An alert with type='success' should display a success message with appropriate styling.
• A dismissible alert should display a close button. Clicking the close button should remove the alert from the DOM (or visually hide it and emit the closed event).

Edge Cases:

• What happens if an invalid type is provided? (The component should gracefully fall back to the default info type).
• Ensure proper handling if message is an empty string.

Examples

Example 1: Basic Info Alert

// In a parent component's template
<app-standalone-alert message="This is an informational message."></app-standalone-alert>

<!-- Expected rendered HTML (simplified) -->
<div class="alert alert-info">
  This is an informational message.
</div>

Explanation: A default info alert is rendered with the provided message.

Example 2: Dismissible Danger Alert

// In a parent component's template
<app-standalone-alert
  message="Your action was unsuccessful."
  type="danger"
  [dismissible]="true"
  (closed)="onAlertClosed()"
></app-standalone-alert>

<!-- Expected rendered HTML (simplified) -->
<div class="alert alert-danger alert-dismissible">
  Your action was unsuccessful.
  <button type="button" class="btn-close" aria-label="Close"></button>
</div>

Explanation: A danger alert with a dismissible button is rendered. Clicking the button would trigger the onAlertClosed() method in the parent component and hide the alert.

Example 3: Invalid Type and Empty Message

// In a parent component's template
<app-standalone-alert message="" type="unknown"></app-standalone-alert>

<!-- Expected rendered HTML (simplified) -->
<div class="alert alert-info">
  <!-- Message content might be empty or a default placeholder -->
</div>

Explanation: An invalid type falls back to info. An empty message results in an empty message area within the alert.

Constraints

• The StandaloneAlertComponent must be a standalone component.
• The component should be implemented using TypeScript and Angular.
• Assume that the necessary CSS classes for styling (alert, alert-success, etc.) are available globally or will be provided by the application consuming this component. You do not need to include the CSS within the component itself.
• The closed event should be emitted only once per close action.

Notes

• Consider using Angular's HostBinding or template manipulation for managing classes and visibility.
• Think about how you will handle the click event on the close button to trigger the closed output event.
• For the dismissible functionality, you'll need to add logic to remove the alert from the DOM or hide it. Emitting an event is the standard way to communicate this back to a parent component.
• The type property should be validated, and a sensible fallback should be in place for unknown types.