Dynamic Component Rendering with NgComponentOutlet

Explain how NgComponentOutlet renders a component type chosen at runtime, and when it's preferable to structural conditionals.

Most of the time you know at compile time which component goes where in a template, but some UIs genuinely need to pick a component class at runtime — a plugin-style dashboard where each widget type maps to a different component, or a CMS-driven page where content blocks are rendered based on a type field from an API response. NgComponentOutlet is the built-in directive for exactly this: point it at a component class (a value, not a selector) and Angular instantiates and renders it in place.

It's like a hotel's universal outlet adapter — you don't rebuild the wall socket for every appliance a guest brings; you plug in an adapter and let it accept whatever type of plug is presented at check-in.

Key Concepts

Interviewers bring this up to see if you know the difference between this and simply switching between components with @if/@switch, which only works when the set of possible components is small and known statically in the template. NgComponentOutlet instead takes an actual Type<T> reference as its input, meaning the mapping from "what to render" to "which class" can live in a configuration object, a lookup map, or data from a backend.

@if@switchNgComponentOutletType<T>

Under the hood it's a thin, declarative wrapper around the same dynamic component creation APIs (ViewContainerRef.createComponent) that power the more manual "Dynamic Component Creation" pattern, so understanding one helps you understand the other. NgComponentOutlet also supports passing an injector and content projection inputs, so the dynamically created component can still receive its own scoped dependencies.

ViewContainerRef.createComponentNgComponentOutlet

A good interview answer flags the main risk: because the component set isn't statically known, you lose some compile-time template type-checking guarantees, and bundle size can be affected if you're not careful about how the possible component types are lazy-loaded versus eagerly bundled together.