Dynamic component loading in Angular - Deep Dive

Overview - Dynamic component loading

What is it?

Dynamic component loading in Angular means creating and showing components on the screen while the app is running, not just when the app starts. Instead of having all components fixed in the template, you can decide which component to show based on user actions or data. This helps make apps more flexible and efficient by loading only what is needed.

Why it matters

Without dynamic loading, apps would have to include all components upfront, making them slower and less responsive. Dynamic loading saves resources and improves user experience by showing components only when necessary. It also allows building features like popups, tabs, or dashboards that change content on the fly.

Where it fits

Before learning dynamic component loading, you should understand Angular components, templates, and basic dependency injection. After mastering it, you can explore advanced topics like lazy loading modules, Angular signals, and server-side rendering with dynamic content.

Mental Model

Core Idea

Dynamic component loading is like choosing and placing a puzzle piece exactly when and where you need it during the game, instead of having all pieces fixed on the board from the start.

Think of it like...

Imagine a restaurant kitchen where the chef prepares dishes only when customers order them, instead of cooking everything in advance. This saves time, space, and ingredients, just like dynamic loading saves app resources by creating components only when needed.

┌───────────────────────────────┐
│       Host Component           │
│  ┌─────────────────────────┐  │
│  │ Dynamic Component Slot   │◄─┤ Insert component here
│  └─────────────────────────┘  │
└───────────────────────────────┘
          ▲
          │
  ┌───────────────────┐
  │ Component Factory  │
  └───────────────────┘
          ▲
          │
  ┌───────────────────┐
  │ Component Class    │
  └───────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Angular Components

Concept: Learn what Angular components are and how they display content using templates.

Angular components are building blocks of the UI. Each has a TypeScript class and an HTML template. The class controls data and behavior, while the template shows what users see. Components are usually declared in templates with tags like .

Result

You can create and display static components in your app.

Understanding components is essential because dynamic loading means creating these building blocks on demand.

2

Foundation

Templates and ViewContainerRef Basics

Concept: Learn how Angular templates and ViewContainerRef let you control where components appear.

ViewContainerRef is a handle to a spot in the template where you can add or remove components dynamically. You get it by injecting it in your component or directive. This lets you tell Angular exactly where to place new components.

Result

You know how to mark a place in your template to insert components later.

Knowing how to target insertion points is key to dynamic component placement.

3

Intermediate

Creating Components Dynamically

🤔Before reading on: do you think Angular creates dynamic components by cloning existing HTML or by instantiating classes? Commit to your answer.

Concept: Learn how to create component instances at runtime using Angular's ComponentFactoryResolver or the new createComponent API.

Angular lets you create components dynamically by calling createComponent with the component class and a ViewContainerRef. This builds the component instance and inserts its view into the DOM at the specified spot.

Result

You can add new components to the page while the app runs, not just at startup.

Understanding that Angular creates real component instances, not just HTML snippets, explains how dynamic components behave fully like static ones.

4

Intermediate

Passing Data to Dynamic Components

🤔Before reading on: do you think you can pass inputs to dynamic components the same way as static ones? Commit to your answer.

Concept: Learn how to set input properties on dynamically created components to customize their behavior.

After creating a component dynamically, you get its instance from the componentRef. You can then set input properties directly on this instance before Angular runs change detection to update the view.

Result

Dynamic components can receive data and behave differently based on inputs.

Knowing how to pass data keeps dynamic components flexible and interactive.

5

Intermediate

Cleaning Up Dynamic Components

Concept: Learn how to remove dynamic components and avoid memory leaks.

When you create components dynamically, Angular does not automatically remove them. You must call destroy() on the componentRef or clear the ViewContainerRef to remove components and free resources.

Result

Your app stays efficient and avoids performance problems.

Understanding cleanup prevents common bugs and resource waste in dynamic loading.

6

Advanced

Using Angular Signals with Dynamic Components

🤔Before reading on: do you think dynamic components can react automatically to reactive state changes? Commit to your answer.

Concept: Learn how Angular's reactive signals can update dynamic components automatically when data changes.

Angular signals let you create reactive data sources. When you pass signals as inputs to dynamic components, those components update their views automatically when the signals change, without manual refresh.

Result

Dynamic components become reactive and efficient, improving user experience.

Knowing how signals integrate with dynamic loading unlocks modern reactive UI patterns.

7

Expert

Optimizing Dynamic Loading with Lazy Modules

🤔Before reading on: do you think dynamic components always come from the main app bundle? Commit to your answer.

Concept: Learn how to load components from separate modules only when needed, reducing initial app size.

Angular supports lazy loading modules that contain components. You can import these modules dynamically with import() and then create components from them. This delays loading code until the user needs it, speeding up startup.

Result

Your app loads faster and uses less memory by loading components on demand.

Understanding lazy loading with dynamic components is key to building scalable, performant Angular apps.

Under the Hood

When you call createComponent, Angular uses its internal ComponentFactory to instantiate the component class, create its view, and attach it to the specified ViewContainerRef. Angular's change detection then runs to update the view. The component instance lives in memory and behaves like any other component, with lifecycle hooks and dependency injection.

Why designed this way?

Angular was designed to separate component logic from rendering. Dynamic loading needed a way to create full component instances at runtime, not just HTML fragments, to keep features like lifecycle hooks and DI working. Using factories and ViewContainerRef provides a flexible, consistent API that fits Angular's architecture.

┌───────────────────────────────┐
│       createComponent()        │
├─────────────┬─────────────────┤
│             │                 │
│   Component Factory            │
│             │                 │
│  ┌──────────▼───────────┐     │
│  │ Instantiate Component │     │
│  └──────────┬───────────┘     │
│             │                 │
│  ┌──────────▼───────────┐     │
│  │ Create Component View │     │
│  └──────────┬───────────┘     │
│             │                 │
│  ┌──────────▼───────────┐     │
│  │ Attach to ViewContainer │   │
│  └──────────┬───────────┘     │
│             │                 │
│  ┌──────────▼───────────┐     │
│  │ Run Change Detection  │     │
│  └──────────────────────┘     │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think dynamic components are just HTML snippets inserted into the DOM? Commit to yes or no.

Common Belief: Dynamic components are just pieces of HTML added to the page like innerHTML.

Reality: Dynamic components are full Angular component instances with their own logic, lifecycle, and change detection.

Why it matters: Treating them as plain HTML leads to missing lifecycle hooks and broken behavior, causing bugs and inconsistent UI.

Quick: Do you think Angular automatically cleans up dynamic components when you remove them from the view? Commit to yes or no.

Common Belief: Angular automatically destroys dynamic components when they are removed from the DOM.

Reality: You must manually destroy dynamic components or clear their container to avoid memory leaks.

Why it matters: Ignoring cleanup causes memory leaks and performance degradation in long-running apps.

Quick: Do you think you can pass inputs to dynamic components exactly like static ones in templates? Commit to yes or no.

Common Belief: Inputs to dynamic components work the same way as static components in templates.

Reality: You must set input properties directly on the component instance after creation and trigger change detection if needed.

Why it matters: Assuming inputs work automatically causes data not to appear or update, confusing developers.

Quick: Do you think dynamic component loading always increases app size? Commit to yes or no.

Common Belief: Dynamic loading always makes the app bigger because it adds more code.

Reality: Dynamic loading can reduce initial app size by loading components only when needed, especially with lazy modules.

Why it matters: Misunderstanding this prevents developers from optimizing app performance and startup time.

Expert Zone

1

Dynamic components share the same injector hierarchy as their host, so dependency injection behaves consistently, but subtle injector boundaries can cause unexpected service instances.

2

Change detection for dynamic components may require manual triggering in some cases, especially when inputs are set after creation, to ensure the view updates correctly.

3

Using Angular signals with dynamic components can simplify reactive updates but requires understanding signal scopes and lifecycle to avoid stale data or memory leaks.

When NOT to use

Avoid dynamic component loading when the UI structure is static and known upfront, as it adds complexity and overhead. For simple conditional rendering, use *ngIf or *ngSwitch. For large feature modules, prefer lazy loading entire modules instead of individual components to optimize performance.

Production Patterns

In real apps, dynamic loading is used for modal dialogs, tabs, dashboards with user-customizable widgets, and plugin architectures. Experts combine it with lazy loading and Angular signals to build scalable, reactive, and fast applications that load only what users need.

Connections

Lazy Loading Modules

Dynamic component loading often builds on lazy loading modules to load components only when needed.

Understanding lazy loading modules helps optimize dynamic loading by reducing initial bundle size and improving app startup speed.

Dependency Injection

Dynamic components rely on Angular's dependency injection to get services and data, just like static components.

Knowing how DI works ensures dynamic components receive correct dependencies and behave consistently.

Factory Design Pattern

Dynamic component loading uses the factory pattern to create component instances at runtime.

Recognizing this pattern connects Angular's dynamic loading to a common software design principle, aiding deeper understanding.

Common Pitfalls

#1 Creating dynamic components without specifying the insertion point.

Wrong approach:

const componentRef = this.componentFactoryResolver.resolveComponentFactory(MyComponent).create(this.injector);

Correct approach:

const componentRef = this.viewContainerRef.createComponent(MyComponent);

Root cause:

Not using ViewContainerRef to insert the component into the DOM causes the component to exist but not appear.

#2 Forgetting to destroy dynamic components when no longer needed.

Wrong approach:

const componentRef = this.viewContainerRef.createComponent(MyComponent);
// No destroy call later

Correct approach:

const componentRef = this.viewContainerRef.createComponent(MyComponent);
componentRef.destroy();

Root cause:

Assuming Angular cleans up automatically leads to memory leaks and performance issues.

#3 Setting inputs on dynamic components before creation.

Wrong approach:

this.viewContainerRef.createComponent(MyComponent, { inputs: { title: 'Hello' } });

Correct approach:

const componentRef = this.viewContainerRef.createComponent(MyComponent);
componentRef.instance.title = 'Hello';
componentRef.changeDetectorRef.detectChanges();

Root cause:

Inputs must be set on the instance after creation; the createComponent options object does not support inputs directly.

Key Takeaways

Dynamic component loading lets Angular apps create and show components during runtime, making UIs flexible and efficient.

It works by creating full component instances and inserting their views into specific places in the template using ViewContainerRef.

Passing data to dynamic components requires setting inputs on the component instance after creation and managing change detection.

Proper cleanup of dynamic components is essential to avoid memory leaks and keep the app performant.

Combining dynamic loading with lazy modules and Angular signals enables building scalable, reactive, and fast applications.