I am learning Angular and I need to create components dynamically and swap them in one container. I have a container:
<ng-container #container></ng-container>
And I need to do these steps:
firstComponent and save reference to it (I can do it)secondComponent in the place of the first one. I remove the firstComponent and create the secondComponent (I can do it).secondComponent and again insert the saved firstComponent. It is very important - not to create a new instance of the firstComponent, but insert the saved one. And this is what I can't do.This the code I use to create components dynamically (angular 13):
@ViewChild("container", { static: true, read: ViewContainerRef })
container!: ViewContainerRef;
...
const firstComponent = this.container.createComponent<FirstComponent>(FirstComponent);
...
//to remove it I do
this.container.remove(0);
Could anyone say how to do step #3?
You can use detach() and insert() methods for such purpose.
According to the documentation:
Detaches a view from this container without destroying it. Use along with insert() to move a view within the current container.
const firstComponent = this.container.createComponent<FirstComponent>(FirstComponent);
// detach without destroying
this.container.detach(0);
// insert the firstComponent with preserved elements.
this.container.insert(firstComponent.hostView, 0);I would go with something like this
if(this.container && this.container.length>0){
// if you do not know the index, search it first and than detach it
this.container.detach(this.container.indexOf(firstComponent));
}