Custom Angular Pipe Operator for String Manipulation

This challenge focuses on creating a custom operator in Angular that enhances string manipulation capabilities within your templates. Custom operators allow you to extend Angular's template language with your own logic, making your templates more readable and maintainable by encapsulating common string transformations. This is particularly useful when dealing with complex data or repetitive formatting tasks.

Problem Description

You are tasked with creating a custom Angular pipe operator called capitalizeWords. This operator should take a string as input and return a new string where the first letter of each word is capitalized. A "word" is defined as a sequence of characters separated by spaces.

What needs to be achieved:

• Create an Angular pipe named capitalizeWords.
• The pipe should accept a single string argument.
• The pipe should capitalize the first letter of each word in the input string.
• The pipe should handle empty strings and strings with leading/trailing spaces gracefully.
• The pipe should preserve the case of the remaining characters in each word.

Key Requirements:

• The solution must be implemented as an Angular pipe.
• The pipe must be injectable and usable within Angular templates.
• The pipe must be written in TypeScript.
• The pipe must handle various input scenarios correctly.

Expected Behavior:

• When given a string like "hello world", the pipe should return "Hello World".
• When given an empty string "", the pipe should return "".
• When given a string with leading/trailing spaces like " hello world ", the pipe should return " Hello World ". (Preserve the original spacing)
• When given a string with multiple spaces between words like "hello world", the pipe should return "Hello World". (Preserve the original spacing)
• When given a string with mixed case like "hELLo wORLd", the pipe should return "HELLo WORLd".

Edge Cases to Consider:

• Null or undefined input (treat as an empty string).
• Strings containing non-alphanumeric characters.
• Strings with special characters within words (e.g., "don't").
• Strings with numbers (e.g., "123 abc").

Examples

Example 1:

Input: "hello world"
Output: "Hello World"
Explanation: The first letter of each word ("hello" and "world") is capitalized.

Example 2:

Input: ""
Output: ""
Explanation: An empty string is returned as is.

Example 3:

Input: "  hello world  "
Output: "  Hello World  "
Explanation: Leading and trailing spaces are preserved.

Example 4:

Input: "hELLo wORLd"
Output: "HELLo WORLd"
Explanation: Only the first letter of each word is capitalized, other letters retain their original case.

Constraints

• The solution must be a functional Angular pipe.
• The pipe should be performant enough for typical Angular template usage (avoiding unnecessary iterations or complex operations).
• The input string can be of any length (within reasonable limits for browser memory).
• The pipe must be compatible with Angular versions 8 and above.

Notes

Consider using regular expressions or string splitting to achieve the desired capitalization. Remember to handle edge cases gracefully to ensure the pipe behaves predictably in all scenarios. Think about how to preserve existing spacing and special characters within words. The goal is to create a reusable and robust pipe that simplifies string manipulation in your Angular templates.