0

I'm trying to create a component several times on a button click. The button is in the parent component and when the click "Add more" it will create the child component as many times as they click "Add more". By default there's only one child component showing then when we click on the button the same child component will be added after the existing one.

how to create existing child component multiple times on button click?

Should I use component Factory or just a plain forLoop?

HTML -Child component

<input type="text />

HTML -Parent component

<child-component #childCom></child-component>

<button (click)="addMore()">Add more</button>

TS

@ViewChild('childCom') childCom: ElementRef;

addMore(){
     console.log("child component");
}
Improve this question
4
  • 1
    And the question is? Commented Sep 27, 2018 at 20:26
  • @LazarLjubenović updated my question. but the question is how to create existing component multiple times on button click? Commented Sep 27, 2018 at 20:29
  • Follow the tutorial on *ngFor: angular.io/tutorial/toh-pt2 Commented Sep 27, 2018 at 20:32
  • @David Walschots I don't think I was clear with my question or you didn't understand it. I think I need to use componentFactory? Or how are you adding the child component to the array? Or can I important the component to the parent and added to the array with out component Factory. Commented Sep 27, 2018 at 20:59

2 Answers 2

Reset to default
2

The idea

Use a for loop for display a component multiple times.

The array

Each time you want to add a new item, we'll add another item into the array (for example the array could be 0, 1, 2 or you could keep some state there -- this depends on your app).

public items = []

public add () {
  this.items = [...this.items, this.items.length]
}

The template

We call the add method from the template when you click a button.

<button (click)="add()">Add</button>

And we iterate over the array and create the component multiple times.

<child-component *ngFor="let item of items"></child-component>

The flow

When the user clicks the button, method add is called. This makes the length of the array longer by one. ngFor notices this and renders another item.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

But how would his work if angular is AOT? and im recreating the component again
It works perfectly fine with AOT. AOT compilation refers to compiling templates to JavaScript during build-time instead of during execution. I suggest you not worry about AOT for a while, there's a rather interesting journey ahead of you: angular.io/tutorial/toh-pt1
@PatricioVargas - The only thing missing from this answer may be a stackblitz to show you that it does work and that you don't need to use a component factory.
@PatricioVargas using *ngFor is simpler than using componentFactory. I'd go for simplicity :-).
It makes no sense to use dynamic factories for just looping over the same component over and over.
|
1

Use ComponentFactoryResolver for this

Add ng-template into your HTML page where you want to generate dynamic component

<child-component #childCom></child-component>
<ng-template #container></ng-template>

then in your component.ts

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
input = InputComponent;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {

  }

InputComponent is child-component according to your code

add() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.input);
    const component = this.container.createComponent(componentFactory);
  }

and don't forget to bootstrap your child-component in NgModule

bootstrap: [AppComponent], entryComponents: [InputComponent]
Improve this answer

4 Comments

Thank you so much! this is exactly what I needed
How would I go to access the values entered in each dynamic component with 2 way binding?
I'm not sure about how to add ngModel to dynamic generated component, but for custom component, you'll need to implement ControlValueAccessor into your custom component. This is useful link stackoverflow.com/a/49856272/1203961
You've const component and you've all access over your custom component. const component have instance property.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.