Integrating Custom Web Components into an Angular Application

This challenge focuses on integrating a pre-built, existing web component into an Angular application. Web components offer a platform-agnostic way to create reusable UI elements, and Angular provides excellent support for utilizing them. Your task is to create an Angular component that renders and interacts with a provided web component.

Problem Description

You are given a simple web component named my-greeting. This web component accepts a name attribute and displays a personalized greeting. The web component's HTML structure is: <my-greeting name="[name]"></my-greeting>. It's already defined and available in your environment (assume it's registered globally). Your goal is to create an Angular component that:

1. Accepts a name input from its parent.
2. Renders the my-greeting web component, passing the received name as an attribute.
3. Dynamically updates the my-greeting web component's name attribute when the Angular component's name input changes.

This exercise demonstrates how to leverage the power of web components within the Angular ecosystem, promoting code reusability and interoperability.

Examples

Example 1:

Input: Angular component's input: "Alice"
Output: The `my-greeting` web component displays: "Hello, Alice!"
Explanation: The Angular component renders the web component with the provided name.

Example 2:

Input: Angular component's input: "Bob" (after initially being "Alice")
Output: The `my-greeting` web component updates to display: "Hello, Bob!"
Explanation: The Angular component dynamically updates the web component's attribute when the input changes.

Example 3: (Edge Case - Empty Input)

Input: Angular component's input: "" (empty string)
Output: The `my-greeting` web component displays: "Hello, !" (or similar, depending on the web component's implementation)
Explanation: Handles the case where the input name is empty. The web component should still render, even with an empty name.

Constraints

• The my-greeting web component is assumed to be globally registered and available. You do not need to define the web component itself.
• The Angular component must be written in TypeScript.
• The Angular component should use Angular's change detection mechanism to update the web component when the input changes.
• The solution should be modular and maintainable.
• The Angular component should be able to handle null or undefined input gracefully (displaying a default greeting or an appropriate message).

Notes

• Consider using Angular's @Input() decorator to receive the name input.
• You'll need to use Angular's template syntax to render the web component.
• Think about how to efficiently update the web component's attribute when the Angular component's input changes. Direct DOM manipulation is generally discouraged in Angular; leverage Angular's data binding capabilities.
• The web component my-greeting is expected to be a standard custom element. It should behave as any other HTML element.