Suggest an edit

Improve this article

Refine the answer for “How to dynamically create a component in Angular?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

In Angular, a component can be created **dynamically** using `ViewContainerRef` and `ComponentFactoryResolver` (in Angular 13+ it is preferable to use just `ViewContainerRef.createComponent`).

## Example for Angular 13+

```typescript
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<ng-template #container></ng-template>`
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container!: ViewContainerRef;

createChild() {
    // create the component dynamically
    const componentRef = this.container.createComponent(ChildComponent);
    componentRef.instance.title = 'Hello, dynamic component!';
  }
}
```

## Explanation

1. `<ng-template>` serves as the insertion point for the dynamic component.
2. `ViewChild` **+** `ViewContainerRef` provide access to this insertion point.
3. `createComponent` creates a component instance and inserts it into the DOM.
4. Through `componentRef.instance` you can set the component's properties after creation.

> Conclusion: dynamically creating components allows rendering elements based on an event or condition, without declaring them in advance in the template.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts149 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.