Angular Version Management Component

This challenge focuses on building a reusable Angular component that allows users to select a version from a predefined list and display the selected version. Version management is crucial for applications that need to support multiple versions of a feature or data structure, allowing for graceful degradation or feature toggling. This component will provide a clean and user-friendly interface for managing these versions.

Problem Description

You are tasked with creating an Angular component called VersionSelectorComponent. This component should:

1. Accept an array of version strings as input: The component should receive an @Input() property named versions which is an array of strings representing available versions (e.g., ["1.0.0", "1.1.0", "2.0.0-beta"]).
2. Display a dropdown/select element: The component should render a dropdown (using <select> element) populated with the versions provided in the versions input.
3. Emit the selected version: The component should emit an @Output() event named versionSelected whenever the user selects a different version from the dropdown. This event should carry the selected version string as its payload.
4. Have a default selected version: The component should accept an @Input() property named defaultVersion which is a string representing the initially selected version. If defaultVersion is not provided, the first version in the versions array should be selected by default. If defaultVersion is not in the versions array, it should default to the first version.
5. Handle empty version array: If the versions array is empty, the component should display a message indicating that no versions are available.

Examples

Example 1:

Input: versions = ["1.0.0", "1.1.0", "2.0.0"], defaultVersion = "1.1.0"
Output: A dropdown with options "1.0.0", "1.1.0", "2.0.0", with "1.1.0" pre-selected.  When a different version is selected, the `versionSelected` event emits the new version.
Explanation: The component renders a dropdown with the provided versions and pre-selects "1.1.0".

Example 2:

Input: versions = ["1.0.0", "1.1.0", "2.0.0"], defaultVersion = "2.1.0"
Output: A dropdown with options "1.0.0", "1.1.0", "2.0.0", with "1.0.0" pre-selected. When a different version is selected, the `versionSelected` event emits the new version.
Explanation: The `defaultVersion` is not in the `versions` array, so the first version ("1.0.0") is selected by default.

Example 3:

Input: versions = [], defaultVersion = "1.0.0"
Output: A message "No versions available."
Explanation: The `versions` array is empty, so the component displays a message indicating that no versions are available.

Constraints

• The component must be written in TypeScript and adhere to Angular best practices.
• The component should be reusable and easily integrated into other Angular applications.
• The component should be responsive and work well on different screen sizes.
• The component should not rely on any external libraries beyond Angular itself.
• The component should be performant; rendering the dropdown should be efficient even with a large number of versions (up to 100).

Notes

• Consider using Angular's change detection to efficiently update the dropdown when the versions or defaultVersion input properties change.
• Think about how to handle potential errors gracefully, such as invalid input data.
• Focus on creating a clean, well-documented, and testable component.
• You can use Angular Material or other UI libraries if you prefer, but it's not required. The core functionality is the version selection and event emission.
• Testing is not required for this challenge, but encouraged for real-world applications.