Angular Custom Pipe: Currency Formatting

Angular pipes provide a convenient way to transform data in your templates. This challenge asks you to create a custom pipe that formats numbers as currency, allowing for customization of the currency symbol and decimal places. This is a common requirement in applications dealing with financial data and demonstrates a fundamental Angular concept.

Problem Description

You need to create an Angular pipe named CustomCurrencyPipe that formats a number as currency. The pipe should accept a number as input and return a string representing the formatted currency value. The pipe should be configurable to accept a currency symbol (e.g., '$', '€', '£') and the number of decimal places to display. If no currency symbol is provided, it should default to '$'. If no decimal places are provided, it should default to 2.

Key Requirements:

• The pipe must correctly format numbers with the specified currency symbol and decimal places.
• The pipe should handle both positive and negative numbers correctly.
• The pipe should handle zero values correctly.
• The pipe should gracefully handle invalid input (e.g., non-numeric values) by returning an appropriate message (e.g., "Invalid Input").
• The pipe should be reusable and configurable within Angular templates.

Expected Behavior:

When used in a template, the pipe should take a number and apply the specified formatting. The output should be a string representing the formatted currency value.

Edge Cases to Consider:

• Input is null or undefined.
• Input is not a number (e.g., a string, boolean, or object).
• Currency symbol is an empty string.
• Decimal places is a non-integer or negative number.
• Very large or very small numbers (consider potential rounding issues).

Examples

Example 1:

Input: 1234.567, currencySymbol: '$', decimalPlaces: 2
Output: $1,234.57
Explanation: The number is formatted with a dollar sign and two decimal places, rounded appropriately.

Example 2:

Input: -987.65, currencySymbol: '€', decimalPlaces: 0
Output: €-988
Explanation: The negative number is formatted with a euro sign and zero decimal places, rounded to the nearest integer.

Example 3:

Input: 0, currencySymbol: '£', decimalPlaces: 3
Output: £0.000
Explanation: Zero is formatted with a pound sign and three decimal places.

Example 4:

Input: "abc", currencySymbol: '$', decimalPlaces: 2
Output: Invalid Input
Explanation: The input is not a number, so the pipe returns an error message.

Constraints

• The pipe must be written in TypeScript.
• The pipe must be compatible with Angular versions 8 and above.
• The pipe should be performant enough for typical Angular applications (avoid unnecessary computations).
• The currency symbol should be a string.
• The number of decimal places should be an integer.

Notes

• Consider using the toFixed() method for formatting numbers to a specific number of decimal places. Remember that toFixed() returns a string.
• Think about how to handle invalid input gracefully. Returning an error message is a good approach.
• Use the Angular dependency injection system to access any necessary services. However, for this specific problem, no external services are required.
• Focus on creating a clean, readable, and well-documented pipe.
• Remember to import the Pipe decorator from @angular/core.