Angular 2 position of dynamically created components

Question

I´m adding multiple dropdowns via component factory by clicking a button. Every time i add a new dropdown, it appears on top of the previous one, which is a problem, because i need it below. Is there a way to set the position of the new component in relation to other components of the same type?

@ViewChild('additionalDropdown', { read: ViewContainerRef })
private additionalDropdown: any;

...

let componentFactory = this.resolver.resolveComponentFactory(MultiselectComponent);
let componentRef = this.additionalDropdown.createComponent(componentFactory, 0,  this.additionalDropdown.injector)

Template:

<ng-container #additionalDropdown></ng-container>

Answer 1

The inserted component's position is the second argument to createComponent() .

You're doing createComponent(componentFactory, 0) so you're always inserting the component as the FIRST view in the container (zero = first position).

If you passed no value for the second argument, the component would be inserted as the LAST view , but you can't do that since you want to pass 3 arguments.

You could try to pass null as the second argument, but I'm not sure it will work:

this.additionalDropdown.createComponent(componentFactory, null, this.additionalDropdown.injector);

Or you could have a manual counter (this would work for sure):

const counter = 0;
this.additionalDropdown.createComponent(componentFactory, counter++, this.additionalDropdown.injector);