Angular Input Component with Validation and Display

This challenge asks you to build a reusable Angular component that accepts an input value, validates it based on a provided pattern, and displays the value along with validation feedback. This is a common requirement in many applications, and building a robust, reusable component will improve code maintainability and reduce duplication.

Problem Description

You need to create an Angular component called InputComponent that takes the following inputs:

label: (string) The label to display next to the input field.
ngModel: (string) The two-way data binding property name to connect to the parent component's data.
pattern: (string) A regular expression pattern to validate the input.
placeholder: (string) Placeholder text for the input field.

The component should:

Display the label and placeholder appropriately.
Provide a text input field bound to the ngModel property.
Validate the input against the provided pattern using Angular's built-in validators.
Display a validation error message below the input field if the input is invalid. The error message should simply state "Invalid input. Please follow the pattern."
Clear the validation error when the input is valid.

Expected Behavior:

When the component is initialized, the input field should be empty unless a value is provided through the parent component.
As the user types, the input value should be updated in the parent component's data bound to ngModel.
If the input is invalid according to the pattern, the validation error message should be displayed.
If the input becomes valid, the validation error message should disappear.

Edge Cases to Consider:

Empty label or placeholder values. Handle gracefully (e.g., display nothing or a default placeholder).
Invalid pattern values (e.g., a malformed regular expression). While you don't need to handle this error explicitly (Angular will), be aware it could occur.
The component should be reusable and not tightly coupled to any specific parent component.

Examples

Example 1:

Input: label="Username", ngModel="username", pattern="^[a-zA-Z0-9]{5,12}$", placeholder="Enter username"
Output: A text input field labeled "Username" with a placeholder "Enter username".  If the user enters "abc", the validation error "Invalid input. Please follow the pattern." is displayed. If the user enters "abcdefg", the error disappears.
Explanation: The component displays the label and placeholder, binds the input to the 'username' property in the parent, and validates against the regex.

Example 2:

Input: label="Email", ngModel="email", pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$", placeholder="Enter email"
Output: A text input field labeled "Email" with a placeholder "Enter email". If the user enters "invalid-email", the validation error "Invalid input. Please follow the pattern." is displayed. If the user enters "test@example.com", the error disappears.
Explanation: Similar to Example 1, but with a different pattern for email validation.

Example 3: (Edge Case)

Input: label="", ngModel="emptyLabel", pattern=".*", placeholder=""
Output: A text input field with no label and no placeholder.  The input is bound to the 'emptyLabel' property.
Explanation: Handles the case where the label and placeholder are empty strings.

Constraints

The component must be written in TypeScript.
Use Angular's built-in form validation features.
The component should be self-contained and reusable.
The component should not include any external dependencies beyond Angular itself.
The component should be performant; avoid unnecessary computations or DOM manipulations.

Notes

Consider using Angular's FormsModule for form validation.
Think about how to structure your component's template and logic to keep it clean and maintainable.
Focus on creating a component that is flexible and can be easily adapted to different validation requirements.
The validation error message is intentionally simple. More sophisticated error handling could be implemented in a real-world application.