CODEWITHSUNDEEP
javascriptangulartypescript
user5182503
user5182503

Reputation:

How to replace component in ViewContainerRef in Angular?

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?

Upvotes: 0

Views: 1631

Answers (2)

Novy
Novy

Reputation: 1508

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

Upvotes: 0

Oleksii Nuzhyn
Oleksii Nuzhyn

Reputation: 91

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

Upvotes: 2

Related Questions