Creating a Reusable CommonModule in Angular

Angular applications often contain components, directives, and pipes that are used across multiple modules. To avoid code duplication and promote maintainability, it's best practice to encapsulate these shared elements within a dedicated CommonModule. This challenge asks you to create a CommonModule that includes a simple, reusable component, directive, and pipe.

Problem Description

You need to create an Angular CommonModule that exports a reusable HighlightDirective, a ReversePipe, and a GreetingComponent. The HighlightDirective should highlight the text of an element with a yellow background. The ReversePipe should reverse a given string. The GreetingComponent should display a greeting message that can be configured via an @Input() property. The module should be designed to be imported into other feature modules without causing any errors or unexpected behavior.

Key Requirements:

• Create a new Angular module named CommonModule.
• Implement the HighlightDirective to apply a yellow background to the element it's applied to.
• Implement the ReversePipe to reverse a string.
• Implement the GreetingComponent with an @Input() property named name to customize the greeting.
• Export the HighlightDirective, ReversePipe, and GreetingComponent from the CommonModule.
• Ensure the module is standalone.

Expected Behavior:

• When imported into another module, the HighlightDirective, ReversePipe, and GreetingComponent should be available for use.
• The HighlightDirective should correctly highlight the text of elements.
• The ReversePipe should correctly reverse strings.
• The GreetingComponent should display a greeting message with the provided name.

Edge Cases to Consider:

• The ReversePipe should handle empty strings gracefully (return an empty string).
• The GreetingComponent should handle null or undefined input for the name input property gracefully (e.g., display a default greeting).

Examples

Example 1:

Input (in a component using HighlightDirective): <p appHighlight>This text should be highlighted.</p>
Output: <p style="background-color: yellow;">This text should be highlighted.</p>
Explanation: The HighlightDirective applies a yellow background to the paragraph element.

Example 2:

Input (in a component using ReversePipe):  {{ "hello" | reverse }}
Output: olleh
Explanation: The ReversePipe reverses the string "hello".

Example 3:

Input (in a component using GreetingComponent): <app-greeting name="Alice"></app-greeting>
Output: <app-greeting name="Alice">Hello, Alice!</app-greeting>
Explanation: The GreetingComponent displays "Hello, Alice!".

Constraints

• The CommonModule must be standalone.
• The HighlightDirective should use inline styles for simplicity.
• The ReversePipe must handle empty strings correctly.
• The GreetingComponent must handle null/undefined name input gracefully.
• All code must be written in TypeScript.

Notes

• Consider using Angular's @Directive, @Pipe, and @Component decorators.
• Think about how to structure your module to ensure it's reusable and doesn't introduce unnecessary dependencies.
• Focus on creating a clean and well-organized module that adheres to Angular best practices.
• You don't need to create a full application; just the CommonModule and its contents are sufficient. You can use a simple app module to import and test the CommonModule.