Angular Dynamic Component Factory

This challenge focuses on building a flexible component factory in Angular. You'll create a service that can dynamically instantiate and render different Angular components based on configuration, which is a powerful pattern for creating highly dynamic UIs and reusable features.

Problem Description

Your task is to implement an ComponentFactoryService in Angular that allows you to dynamically create and inject Angular components into a specific location within the DOM. This service should be able to accept a component type and a configuration object, and then render that component at a designated target.

Key Requirements:

1. ComponentFactoryService: Create a service named ComponentFactoryService.
2. createComponent Method: This service should expose a method createComponent(componentType: Type<any>, targetElement: HTMLElement, data?: any):
   • componentType: The Angular component class to be created (e.g., MyDynamicComponent).
   • targetElement: The DOM element where the component should be appended.
   • data: An optional object containing data to be passed to the created component.
3. Dynamic Rendering: The service should use Angular's ComponentFactoryResolver and ApplicationRef to dynamically create and attach the component's view to the DOM.
4. Data Binding: Any data passed to createComponent should be accessible within the dynamically created component. You should consider how to pass this data (e.g., via @Input() properties).
5. Cleanup: The service should provide a mechanism to destroy and remove the dynamically created component when it's no longer needed, preventing memory leaks. A good approach is to return a disposable object or a function.

Expected Behavior:

When createComponent is called with a valid componentType and targetElement, the component should be rendered as a child of targetElement. If data is provided, it should be correctly bound to the component's inputs. Calling the returned cleanup function should completely remove the component from the DOM and its associated Angular view.

Edge Cases to Consider:

• What happens if targetElement is null or undefined?
• What if the componentType is not a valid Angular component?
• How will you handle multiple dynamic components being created at the same target? (For this challenge, assume only one component at a time per target for simplicity).
• How to ensure data passed via @Input() is correctly set on the dynamic component instance.

Examples

Example 1: Simple Component Creation

Scenario: You want to display a simple "Welcome" message.

Input:

• componentType: WelcomeComponent (a component with a simple template, e.g., <div>{{ message }}</div>)
• targetElement: A div element with id="dynamic-container"
• data: { message: 'Hello from the factory!' }

Code Snippet (Illustrative - actual service call):

// Assume WelcomeComponent exists with an @Input() message
const componentFactoryService = // ... get service instance
const targetDiv = document.getElementById('dynamic-container');

if (targetDiv) {
  const destroyComponent = componentFactoryService.createComponent(
    WelcomeComponent,
    targetDiv,
    { message: 'Hello from the factory!' }
  );

  // Later, to remove the component:
  // destroyComponent();
}

Output (Rendered HTML within #dynamic-container):

<app-welcome-component>
  <div>Hello from the factory!</div>
</app-welcome-component>

Explanation: The ComponentFactoryService instantiates WelcomeComponent, passes the message data to its input, and appends it to the dynamic-container.

Example 2: Creating a Component with Event Handling (Conceptual)

Scenario: You want to display a button that emits an event when clicked.

Input:

• componentType: ActionButtonComponent (a component with a button and an @Output() clicked: EventEmitter<void>)
• targetElement: A div element with id="action-button-container"
• data: { buttonText: 'Perform Action' }

Code Snippet (Illustrative - actual service call):

// Assume ActionButtonComponent exists with @Input() buttonText and @Output() clicked
const componentFactoryService = // ... get service instance
const targetDiv = document.getElementById('action-button-container');

if (targetDiv) {
  const destroyComponent = componentFactoryService.createComponent(
    ActionButtonComponent,
    targetDiv,
    { buttonText: 'Perform Action' }
  );

  // You would typically subscribe to output events BEFORE or DURING creation,
  // or the factory might return an object exposing the component instance
  // for event subscription. For simplicity here, we focus on creation and data binding.
}

Output (Rendered HTML within #action-button-container):

<app-action-button-component>
  <button>Perform Action</button>
</app-action-button-component>

Explanation: The ActionButtonComponent is created, its buttonText input is set, and it's added to the DOM. The mechanism for subscribing to its clicked output would be handled outside or via a more advanced factory design.

Constraints

• You must use Angular's ComponentFactoryResolver and ApplicationRef.
• The solution must be implemented in TypeScript.
• The createComponent method should return a function that, when called, cleans up the created component.
• The created component should be a direct child of the targetElement.

Notes

• Consider how Angular's dependency injection will work with dynamically created components.
• Think about the lifecycle hooks of the dynamically created components.
• The data object passed to the factory should map to @Input() properties of the target component.
• You'll need to set up a simple Angular project with at least one dummy component to test your factory.
• A robust factory might also handle outputs (events) emitted by the dynamic component. For this challenge, focus on creation and @Input() binding.