Robust Angular Components: Runtime Input Validation

Angular's template syntax provides compile-time checks, but sometimes you need to validate input data at runtime, especially when dealing with external data sources or complex user interactions. This challenge focuses on implementing runtime checks within an Angular component to ensure data integrity and provide helpful error messages to the user. You'll build a component that validates a numerical input and displays appropriate feedback.

Problem Description

You are tasked with creating an Angular component called NumberInputComponent that accepts a numerical input value from the user. The component should perform the following runtime checks:

1. Type Check: Ensure the input is a number. If not, display an error message: "Input must be a number."
2. Range Check: The input number must be within the range of 1 to 100 (inclusive). If the number is outside this range, display an error message: "Input must be between 1 and 100."
3. Valid Input: If the input is a valid number within the specified range, display a success message: "Input is valid."

The component should have the following:

• An input property called inputValue of type number that receives the numerical input.
• A @Input() decorator for inputValue.
• A ngOnChanges() lifecycle hook to trigger the validation whenever the inputValue changes.
• A errorMessage property (string) to store the error message to display.
• A successMessage property (string) to store the success message to display.
• A template that displays either the error message or the success message based on the values of errorMessage and successMessage. If both are empty strings, display a placeholder message: "Enter a number."

Examples

Example 1:

Input: inputValue = "abc"
Output: "Input must be a number."
Explanation: The input is not a number, so the type check fails.

Example 2:

Input: inputValue = 0
Output: "Input must be between 1 and 100."
Explanation: The input is outside the valid range (1-100).

Example 3:

Input: inputValue = 50
Output: "Input is valid."
Explanation: The input is a number and within the valid range.

Example 4:

Input: inputValue = 101
Output: "Input must be between 1 and 100."
Explanation: The input is outside the valid range (1-100).

Example 5:

Input: inputValue = null
Output: "Enter a number."
Explanation: inputValue is null, so no validation is performed and the placeholder is displayed.

Constraints

• The component must be written in TypeScript.
• The component must use Angular's @Input() decorator.
• The validation logic must be triggered within the ngOnChanges() lifecycle hook.
• The component should be self-contained and reusable.
• The component should handle null or undefined input values gracefully.

Notes

• Consider using typeof to check the data type.
• Remember to clear the errorMessage and successMessage when the input becomes valid.
• Think about how to handle potential errors during the validation process (although this is less critical for this specific problem).
• Focus on clear and concise code that is easy to understand and maintain. Avoid unnecessary complexity.
• The component should not perform any HTTP requests or interact with external services. It's purely focused on runtime input validation.