Estoy aprendiendo Angular y necesito crear componentes dinámicamente e intercambiarlos en un contenedor. Tengo un contenedor:
<ng-container #container></ng-container>Y necesito hacer estos pasos:
firstComponent y guardar la referencia a él (puedo hacerlo)secondComponent en lugar del primero. firstComponent el primer componente y creo el segundo secondComponent (puedo hacerlo).secondComponent y volver a insertar el firstComponent guardado. Es muy importante: no crear una nueva instancia del firstComponent , sino insertar la guardada. Y esto es lo que no puedo hacer.Este es el código que uso para crear componentes dinámicamente (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);¿Alguien podría decir cómo hacer el paso #3?
Puede usar los métodos detach() e insert() para tal fin. Según la documentación:
Separa una vista de este contenedor sin destruirlo. Úselo junto con insert() para mover una vista dentro del contenedor actual.
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);yo iria con algo asi
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)); }