Angular Version Management System

This challenge involves building a simplified version management system within an Angular application. You'll be creating a component that allows users to view, select, and apply different versions of a piece of content. This is a fundamental feature for many applications, enabling users to track changes, revert to previous states, or compare different iterations.

Problem Description

Your task is to develop an Angular component that manages and displays different versions of a hypothetical "document." The component should:

1. Display Available Versions: Show a list of available versions of the document, each with a version number and a timestamp.
2. Select a Version: Allow the user to select a specific version from the list.
3. Apply Selected Version: When a version is selected, the "content" displayed on the screen should update to reflect the data associated with that selected version.
4. Track Current Version: Visually indicate which version is currently being displayed.

Key Requirements:

• Data Structure: You will be provided with an array of version objects. Each object will have at least versionNumber (number), timestamp (string or Date), and content (string).
• Component Design: Create a reusable Angular component.
• User Interface: Design a clear and intuitive UI for displaying versions and selecting them.
• State Management: The component needs to manage the currently active version.

Expected Behavior:

• Initially, the component should display the latest version (or a default version).
• Clicking on a version in the list should update the main content display to show the content of the clicked version.
• The selected version should be visually highlighted in the list.

Edge Cases to Consider:

• What happens if there are no versions available?
• How to handle very long content strings in the display? (For this challenge, basic text display is sufficient).

Examples

Example 1:

Input Data (provided to the component):

[
  { "versionNumber": 1, "timestamp": "2023-10-27T10:00:00Z", "content": "Initial draft of the document." },
  { "versionNumber": 2, "timestamp": "2023-10-27T11:30:00Z", "content": "Added a new section about features." },
  { "versionNumber": 3, "timestamp": "2023-10-27T14:00:00Z", "content": "Revised the introduction and concluded the document." }
]

Expected UI State (after component initialization, assuming version 3 is latest):

• Version List:
  • Version 1 (2023-10-27T10:00:00Z)
  • Version 2 (2023-10-27T11:30:00Z)
  • Version 3 (2023-10-27T14:00:00Z) (highlighted)
• Content Display: "Revised the introduction and concluded the document."

Interaction:

• User clicks on "Version 1".
• UI State Updates:
  • Version List:
    • Version 1 (2023-10-27T10:00:00Z) (highlighted)
    • Version 2 (2023-10-27T11:30:00Z)
    • Version 3 (2023-10-27T14:00:00Z)
  • Content Display: "Initial draft of the document."

Example 2:

Input Data:

[
  { "versionNumber": 10, "timestamp": "2024-01-15T09:00:00Z", "content": "Release candidate build." }
]

Expected UI State (after component initialization):

• Version List:
  • Version 10 (2024-01-15T09:00:00Z) (highlighted)
• Content Display: "Release candidate build."

Example 3 (Edge Case: No Versions):

Input Data:

[]

Expected UI State (after component initialization):

• Version List: "No versions available." (or similar message)
• Content Display: (Empty or a placeholder message like "Select a version to view content.")

Constraints

• The version data will be provided as an array of objects.
• Each version object will have versionNumber, timestamp, and content properties.
• You can assume that versionNumber is unique and increasing for simplicity.
• Your component should be designed to be easily integrated into a larger Angular application.
• No external libraries are allowed for version management logic itself (Angular's built-in features are expected).

Notes

• Consider using Angular's data binding (interpolation, property binding, event binding) to make your component dynamic.
• Think about how you will store and update the currently selected version within your component's state.
• For displaying the timestamp, you can use Angular's DatePipe for formatting if desired.
• Styling is secondary to functionality for this challenge, but aim for clarity. You can use simple CSS classes to highlight the selected version.