Dynamic Rendering in Angular Is Easy. Trusting Dynamic UI Is Not.

Dynamic rendering in Angular sounds like a fairly narrow technical problem: “I don't know which component I need until runtime.” Angular already gives us several good tools for that. But there is a big difference between dynamically choosing a component and dynamically constructing an entire UI from a runtime specification. And that difference becomes especially important with Server-Driven UI and Generative UI. 1. ngComponentOutlet : when the problem is really just component selection For simple cases Angular already gives us: <ng-container *ngComponentOutlet= "componentType" /> This works very well when the application already knows its possible components and runtime logic only decides which one to display. componentType = condition ? UserCardComponent : AdminCardComponent ; The advantages are obvious: very little infrastructure, normal Angular lifecycle, AOT-compatible components and a relatively declarative template. But this approach starts becoming uncomfortable when the runtime input is no longer: UserCardComponent and instead becomes: { "type" : "Card" , "children" : [ { "type" : "Input" , "props" : { "label" : "Name" } } ] } Now we are no longer selecting a component. We are interpreting a UI description. 2. ViewContainerRef.createComponent() : more control, more responsibility Angular also allows components to be instantiated programmatically: const ref = viewContainerRef . createComponent ( componentType ); ref . setInput ( ' label ' , ' Name ' ); This is a powerful primitive. We control where the component is created, which component is used, how inputs are assigned and when the component is destroyed. For relatively contained dynamic behavior, this can be exactly what we need. But once a runtime specification controls many components, application code often starts evolving into something like: switch ( node . type ) { case ' input ' : ... case ' select ' : ... case ' button ' : ... case ' dialog ' : ... } Then we add input mapping. Then events. Then ne