Free tools Windows power users keep installed
One-click scans. No signup required.
Angular offers two primary ways to render a component dynamically: use NgComponentOutlet in a template, or create it in TypeScript with ViewContainerRef. Choose the outlet or a view container when the component belongs in the current Angular view. Use the standalone createComponent function when you need to place its host element yourself, such as under document.body. For ordinary conditional or triggered lazy loading, consider @defer before building a manual rendering flow.
Choose the rendering API that fits the job
| Need | Starting point | How it behaves |
|---|---|---|
| Select a component in a template based on state | NgComponentOutlet |
Renders the selected component through a template directive. Angular’s programmatic rendering guide. |
| Insert a component into the current Angular view | ViewContainerRef.createComponent |
Inserts its host view into the view container’s hierarchy, appending by default. Angular’s guide and ViewContainerRef API reference. |
| Place the component host at a specific DOM location outside the current view | Standalone createComponent |
Returns a ComponentRef; you are responsible for attaching its view to application change detection and placing the host element. Angular’s guide and createComponent API reference. |
| Load a component only after a configured trigger | Consider @defer |
Angular recommends considering it for common lazy-loading cases. If the use case is not covered, load the component with import() and render it through an outlet or view container. Angular’s guide. |
Render a component through a template
Use NgComponentOutlet when component selection is part of template rendering—for example, when application state determines which component should occupy a region of the page. It is the template-oriented option, so Angular manages its placement in that template rather than requiring you to manually create and place a host element.
As an Amazon Associate I earn from qualifying purchases.
If the component is only needed after a condition or trigger, first consider whether @defer expresses the loading behavior you want. Dynamic imports combined with an outlet or view container remain useful when the loading and selection logic needs more control than that pattern provides.
Insert a component into a view with ViewContainerRef
Use ViewContainerRef.createComponent when the new component should live at a specific location in an existing Angular view. The container inserts the component’s host view into its own hierarchy. By default, the new view is appended; you can provide an insertion index when it needs another position.
#1 Best Overall
The API accepts options for an injector or environment injector, projectable nodes, directives, creation-time bindings and an error callback. The container also provides insert, move, remove, detach and clear for managing views after creation. Use these operations when dynamic content must be reordered, removed or temporarily detached.
Use standalone createComponent for caller-controlled placement
The standalone createComponent function is for cases where the component host should not be inserted into an existing view container. It returns a ComponentRef and accepts an EnvironmentInjector, with optional settings including a host element, element injector, projectable nodes, directives, bindings and an error callback.
Because this API does not place the component into the application’s view hierarchy for you, the caller must attach its host view to ApplicationRef for application change detection, put the host element where it belongs, and manage cleanup. Angular’s example explicitly attaches the view and invokes change detection. This approach is useful for a host at a caller-chosen DOM location, but requires more lifecycle work than a view container.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Wire inputs, outputs and host directives at creation
For programmatically created components, Angular documents the creation-time helpers inputBinding(), outputBinding() and twoWayBinding(). These let you establish component bindings as part of creation rather than treating runtime rendering as placement alone. The creation APIs also support applying host directives.
Choose bindings that match the component’s contract, and keep the component reference available if later interaction or teardown requires it. The amount of manual wiring depends on the API: standalone rendering leaves more surrounding setup to the caller, while a view container keeps the component within an existing Angular view.
Plan error handling and cleanup
The onError option handles errors in rendering or change detection; it does not catch errors thrown synchronously while the component is being constructed. If construction itself can fail, handle that separately around the creation call. For standalone rendering, detach the host view from ApplicationRef and destroy the component when it is no longer needed. For view-container rendering, use the container’s removal or clearing methods to dispose of views, or detach them when they need to be retained for later use.
Rank #4
Angular’s custom-elements guidance also emphasizes that runtime rendering with createComponent leaves surrounding infrastructure—such as host-view attachment, input/output wiring and view cleanup—to the caller. Treat those responsibilities as part of the implementation, not optional follow-up work.
Use a different API for template fragments
If the content to render is a template fragment rather than a component, use a TemplateRef with ViewContainerRef.createEmbeddedView. Embedded-view creation and component creation solve different problems; do not use a component API merely because the template needs to appear dynamically.
Best Value
Check hydration when projecting existing DOM nodes
Angular’s NG0503 error guidance identifies projection of DOM nodes during hydration as unsupported in the described scenario and connects the issue to nodes supplied through ViewContainerRef.createComponent or standalone createComponent. This is a specific projection limitation, not evidence that all dynamic component rendering is incompatible with hydration. Check the error guidance against the application’s server-rendering and projection pattern.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
