0

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?

Improve this question
2
  • What does happen when you do that? I mean what is the problem with your code? Commented Apr 17, 2022 at 11:43
  • @Novy I don't have any problems with step #1 and #2. I just don't know how to do step #3. Commented Apr 17, 2022 at 11:46

2 Answers 2

Reset to default
2

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

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

Comments

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));
}
Improve this answer

Comments

Your Answer

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