Angular Dynamic Portal Creation and Management

This challenge focuses on building a dynamic portal system in Angular. You will implement a component that allows users to dynamically create and manage different types of "portals" within an application. This is a common requirement for building flexible dashboards, configuration interfaces, or multi-tenant applications where content and functionality need to be modular and adaptable.

Problem Description

Your task is to create an Angular application that enables the creation and display of various "portal" components. The system should allow users to add different types of portals to a main container, and these portals should be capable of rendering their own unique content and interacting with each other if necessary.

Key Requirements:

Dynamic Portal Creation: Implement a mechanism to dynamically instantiate and append portal components to a designated area in the application.
Portal Registry: Maintain a registry of available portal types (components) that can be created.
Portal Configuration: Each portal instance should have its own configurable data that influences its content or behavior.
Component Rendering: The system must be able to render different Angular components as portals.
Basic Interaction (Optional but Recommended): Allow for a simple form of communication or data sharing between portals.
Removal of Portals: Provide a way to remove a created portal from the container.

Expected Behavior:

A user interface should exist to select from a list of available portal types.
Upon selection, a new instance of the chosen portal component should be added to the main display area.
Each portal instance should display its unique content based on its type and any configured data.
Users should be able to remove specific portal instances.

Edge Cases to Consider:

What happens if a portal fails to load or initialize?
How to handle a large number of dynamically added portals (performance).
Ensuring type safety when dealing with dynamically created components.

Examples

Example 1: Basic Portal Creation

Input:

A list of available portal types: ['WidgetA', 'WidgetB'].
User selects WidgetA.

Output:

A WidgetA component instance is rendered in the portal container. The WidgetA component displays a default message like "This is Widget A."

Explanation: The application dynamically creates an instance of the WidgetA component and appends it to the main display area.

Example 2: Portal with Configuration

Input:

Available portal types: ['Chart', 'TextDisplay'].
User selects Chart.
User provides configuration data for the chart: { title: 'Sales Data', data: [10, 20, 30] }.

Output:

A Chart component instance is rendered. The Chart component uses the provided configuration to display a chart with the title "Sales Data" and the given data points.

Explanation: The Chart component receives configuration data during its instantiation, allowing for customized rendering.

Example 3: Portal Removal

Input:

Two portals are active: WidgetA and TextDisplay.
User triggers the removal of the WidgetA portal.

Output:

The WidgetA component instance is removed from the portal container, leaving only the TextDisplay portal.

Explanation: The system successfully identifies and destroys the specified portal instance.

Constraints

The solution must be implemented using Angular and TypeScript.
You should leverage Angular's dynamic component loading capabilities (e.g., ViewContainerRef, ComponentFactoryResolver - or the newer programmatic API if preferred).
Component types should be discoverable and manageable programmatically.
The solution should be reasonably performant for a moderate number of portals (e.g., up to 20-30).

Notes

Consider creating a base Portal interface or abstract class that all your portal components can extend to ensure a common structure and methods.
Think about how you will map portal names (e.g., "WidgetA") to actual Angular component classes.
For configuration, consider using an object passed as an @Input() to the dynamically created component.
For interaction, consider using an Angular service or EventEmitters.
The focus is on the dynamic creation and management of components. The internal logic of each individual portal can be kept simple for this challenge.

Angular Dynamic Portal Creation and Management

Problem Description

Key Requirements:

Dynamic Portal Creation: Implement a mechanism to dynamically instantiate and append portal components to a designated area in the application.
Portal Registry: Maintain a registry of available portal types (components) that can be created.
Portal Configuration: Each portal instance should have its own configurable data that influences its content or behavior.
Component Rendering: The system must be able to render different Angular components as portals.
Basic Interaction (Optional but Recommended): Allow for a simple form of communication or data sharing between portals.
Removal of Portals: Provide a way to remove a created portal from the container.

Expected Behavior:

A user interface should exist to select from a list of available portal types.
Upon selection, a new instance of the chosen portal component should be added to the main display area.
Each portal instance should display its unique content based on its type and any configured data.
Users should be able to remove specific portal instances.

Edge Cases to Consider:

What happens if a portal fails to load or initialize?
How to handle a large number of dynamically added portals (performance).
Ensuring type safety when dealing with dynamically created components.

Examples

Example 1: Basic Portal Creation

Input:

A list of available portal types: ['WidgetA', 'WidgetB'].
User selects WidgetA.

Output:

A WidgetA component instance is rendered in the portal container. The WidgetA component displays a default message like "This is Widget A."

Explanation: The application dynamically creates an instance of the WidgetA component and appends it to the main display area.

Example 2: Portal with Configuration

Input:

Available portal types: ['Chart', 'TextDisplay'].
User selects Chart.
User provides configuration data for the chart: { title: 'Sales Data', data: [10, 20, 30] }.

Output:

A Chart component instance is rendered. The Chart component uses the provided configuration to display a chart with the title "Sales Data" and the given data points.

Explanation: The Chart component receives configuration data during its instantiation, allowing for customized rendering.

Example 3: Portal Removal

Input:

Two portals are active: WidgetA and TextDisplay.
User triggers the removal of the WidgetA portal.

Output:

The WidgetA component instance is removed from the portal container, leaving only the TextDisplay portal.

Explanation: The system successfully identifies and destroys the specified portal instance.

Constraints

The solution must be implemented using Angular and TypeScript.
You should leverage Angular's dynamic component loading capabilities (e.g., ViewContainerRef, ComponentFactoryResolver - or the newer programmatic API if preferred).
Component types should be discoverable and manageable programmatically.
The solution should be reasonably performant for a moderate number of portals (e.g., up to 20-30).

Notes

Consider creating a base Portal interface or abstract class that all your portal components can extend to ensure a common structure and methods.
Think about how you will map portal names (e.g., "WidgetA") to actual Angular component classes.
For configuration, consider using an object passed as an @Input() to the dynamically created component.
For interaction, consider using an Angular service or EventEmitters.
The focus is on the dynamic creation and management of components. The internal logic of each individual portal can be kept simple for this challenge.