Dynamic components are one of Angular’s most powerful features. They allow you to load and render components at runtime instead of hardcoding them into templates. This is especially useful when building dashboards, modals, or any UI where the component type depends on user actions or data.
In this article, we’ll walk through a complete example of creating and using a dynamic component with its own template content.
Why Dynamic Components?
Normally, Angular templates are static — you declare components in HTML, and Angular renders them. But what if you don’t know which component to render until runtime? Dynamic components solve this by letting you programmatically inject components into the DOM.
Step 1: Create a Dynamic Component
Let’s start with a simple component that has its own template content.
// hello.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hello',
template: `
<div class="hello-box">
<h2>Hello {{name}}!</h2>
<p>This is dynamic content rendered at runtime.</p>
</div>
`,
styles: [`
.hello-box {
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
background-color: #f9f9f9;
}
`]
})
export class HelloComponent {
@Input() name: string = 'Guest';
}
This component has a simple template and accepts an input property name.
Step 2: Create a Directive to Mark the Host
We need a placeholder in the template where Angular can inject our dynamic component.
// dynamic.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[dynamicHost]',
})
export class DynamicDirective {
constructor(public viewContainerRef: ViewContainerRef) {}
}
This directive exposes ViewContainerRef, which gives us programmatic control over the DOM.
Step 3: Build a Loader Component
The loader component will use the directive to inject our dynamic component at runtime.
// dynamic-loader.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { DynamicDirective } from './dynamic.directive';
import { HelloComponent } from './hello.component';
@Component({
selector: 'app-dynamic-loader',
template: `<ng-template dynamicHost></ng-template>`
})
export class DynamicLoaderComponent implements OnInit {
@ViewChild(DynamicDirective, { static: true }) dynamicHost!: DynamicDirective;
ngOnInit() {
const viewContainerRef = this.dynamicHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(HelloComponent);
componentRef.instance.name = 'Umamaheswar'; // passing data dynamically
}
}
Here’s what happens:
- We clear the container.
- Dynamically create
HelloComponent. - Pass data (
name) into the component instance.
Step 4: Use the Loader in Your App
Finally, include the loader in your app template.
<!-- app.component.html -->
<app-dynamic-loader></app-dynamic-loader>
Output
When you run the app, Angular will dynamically inject the HelloComponent into the loader. You’ll see:
Hello Umamaheswar!
This is dynamic content rendered at runtime.
When to Use Dynamic Components
Dynamic components are ideal for:
- Dashboards where widgets are loaded based on user preferences.
- Modals/Dialogs where the content changes depending on context.
- CMS-driven apps where templates are defined by external data.
Conclusion
Dynamic components give Angular applications flexibility and power. By combining a directive, a loader, and runtime injection, you can render components on demand with full control over their inputs and lifecycle.
