4

I am using angular 5 and I want to create new instances of a component on demand.

This is the code I currently have:

app.component.ts:

import { Component } from '@angular/core';
import { MyComponent } from './mycomp/my.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {}
  addCmp() {
    console.log('adding');
    // Add an instance of MyComponent code goes here ?
  }
}

app.component.html

<button (click)="addCmp()" >Add New MyComponent below</button>

MyComponent.html:

<div>I am MyComponent</div>

How can I do this?

Improve this question
3
  • 1
    What are you trying to achieve? Commented Nov 28, 2017 at 15:59
  • That's not how angular works. Please provide more information on what your end goal is. Commented Nov 28, 2017 at 16:01
  • In basic terms, I have this component called MyComponent and I want addCmp() {} to add an instance of the component to the dom everytime addCmp() is called Commented Nov 28, 2017 at 16:06

2 Answers 2

Reset to default
7

This is the way to create a component by your self: (Don't forget to destroy it! call destroy() on the componentRef to do this)

Parent Component:

@ViewChild('componentHolder', { read: ViewContainerRef }) componentHolder: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

public createComponent(): void {
          const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyComponent);
          const componentRef = this.componentHolder.createComponent(componentFactory);
}

Parent Component HTML:

<button (click)="createComponent()">Add New MyComponent below</button>
<div #componentHolder ></div>

Add the MyComponent in the NgModule:

...
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
  ],
  entryComponents: [
    MyComponent
  ],...
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

When I try to run createComponent() I get this error: ERROR Error: No component factory found for MyComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError
Add MyComponent into the ngModule entryComponents, then it will work, i have update my answer.
How to delete such a dynamically created component? I'm adding components as editable table rows but how to delete a specific component?
After creation of the component you will get a ComponentRef Object, on this Object you can call destroy(), this will cleanup everything and delete the component. About the Angular class angular.io/api/core/ComponentRef.
0

You could use an array in a parent component and grow the array every time you click the add button. In your app.component.html use a ngFor loop to iterate the array and then use the selector defined on MyComponent in the loop which will add a new instance for each iteration.

Keep in mind you never explain why you want to do this so there is no data being passed and no one can say which way is the best way to do this without knowing how you want to interact with your created components.

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  myComponents:any[] = [];

  constructor() {}
  addCmp() {
    console.log('adding');
    this.myComponents.push(null);
  }
}

app.component.html

<button (click)="addCmp()" >Add New MyComponent below</button>
<ng-container *ngFor="let i of myComponents">
  <my-component></my-component>
</ng-container>
Improve this answer

1 Comment

actually, in this, we can not access the data from each instance of a component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.