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:

1. To create a firstComponent and save reference to it (I can do it)
2. To create the secondComponent in the place of the first one. I remove the firstComponent and create the secondComponent (I can do it).
3. To remove the 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?

CodePudding user response：

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);

CodePudding user response：

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));
}