How to dynamically render different Angular components with unique @Input() and @Output()...

I'm building a dynamic UI engine in Angular (v15+) where I need to load different components at runtime based on configuration. These components each have different @Input() and @Output() properties.

What I'm trying to achieve:

Render multiple dynamic components using ViewContainerRef.createComponent()

Bind @Input() values dynamically (even though each component has different inputs)

Subscribe to @Output() events generically

Cleanly destroy or replace components when needed

const componentConfigs = [
{
component: ButtonComponent,
inputs: { label: 'Click Me' },
outputs: { clicked: () => alert('Button clicked') },
},
{
component: CardComponent,
inputs: { title: 'Card Title', content: 'Lorem ipsum' },
outputs: { selected: data => console.log(data) },
},
];

loadComponent(config) {
const componentRef = this.container.createComponent(config.component);

// How to set `@Input()` and bind `@Output()` safely?
}


My Questions:

How can I dynamically bind arbitrary @Input() and @Output() properties using createComponent()?

Is there a type-safe or generic way to handle components with different input/output contracts?

What's the best practice for cleaning up subscriptions from @Output() when destroying components?

This seems like a common requirement in CMS-style systems or dynamic form builders. Most examples show how to dynamically load one static component, but I’m looking for a flexible pattern that supports many components with unique bindings.

Continue reading...