Ways to swap out element within ViewContainerRef in Angular

I am currently expanding my knowledge of Angular and I have encountered a challenge regarding dynamically creating components and swapping them within a single container. Here is the setup:

<ng-container #container></ng-container>

Here are the steps I need to accomplish:

  1. Create a firstComponent and store a reference to it (I have managed to do this)
  2. Replace the firstComponent with the secondComponent. This involves removing the firstComponent and creating the secondComponent (which I can handle).
  3. Remove the secondComponent and re-insert the previously stored firstComponent. The key here is to avoid creating a new instance of the firstComponent, but rather inserting the existing one. This is where I'm facing difficulty.

Below is the code snippet I am using for dynamically creating components in 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);

If anyone has insights on how to achieve step #3 successfully, please share your expertise!

javascriptangulartypescript

Answer №1

To achieve this, you can utilize the detach() and insert() methods for moving views within a container. As stated in the official documentation:

The detach method removes a view from the container without destroying it. It is often used in conjunction with insert() to relocate a view within the current container.

const firstComponent = this.container.createComponent<FirstComponent>(FirstComponent);

// detach without clean up
this.container.detach(0);

// re-insert firstComponent while keeping elements intact
this.container.insert(firstComponent.hostView, 0);

Answer №2

My suggestion would be to utilize a code similar to this

if(this.wrapper && this.wrapper.length>0){
    // Determine the index before detaching the component
    this.wrapper.detach(this.wrapper.indexOf(mainComponent));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deploying NextJS: Error in type causes fetch-routing malfunction

Encountering a mysterious and funky NextJS 13.4 Error that has me stumped. Here's a summary of what I've observed: The issue only pops up after running npm run build & npm run start, not during npm run dev The problem occurs both locally and ...

javascriptreactjswebpacknext.js

"Troubleshooting Angular: Uncovering the Root of the Issue with

I have set a specific pattern for the email field which should follow this format: pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(( ...

javascriptangularjs

AngularJS initiates an XMLHttpRequest (XHR) request before each routeChange, without being dependent on the controller being used

I'm currently embarking on a new project, and for the initial phase, I want to verify if the user has an active session with the server by sending an XHR HEAD request to /api/me. My objective is to implement the following syntax $rootScope.$on("$rou ...

javascriptangularjs

Cluster multiple data types separately using the Google Maps JavaScript API v3

I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...

angulartypescriptgoogle-mapsmarkerclustererazure-maps

Go through each item in the array and change its properties

When retrieving data from the database, I receive the following information: "Data": [{ "mainData": [{ "_id": ObjectId("5ab63b22d012ea2bc0bb7e9b"), "date": "2018-03-24" }], "files": [ { "_id": ObjectId("5ab63b22d012ea2bc0bb7e9d"), ...

javascriptdatabaseangular

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

Angular 2 forms, popping the chosen item in the `<select>` element

Check out the FormBuilder: let valuesArray = fb.array([ fb.group({ name: 'one' }), fb.group({ name: 'two' }), fb.group({ name: 'three' }), fb.group({ name: 'four' }) ]); this.for ...

angulartypescript

Grails 3.1.9 does not support displaying JavaScript

Having trouble getting the datepicker to display using JavaScript <script> $( "#invoiceDate" ).datepicker({ inline: true, dateFormat: "yy-mm-dd", onSelect: function(datetext){ datetext = datetext+" 00:00:00.0" ...

javascriptajaxgrailsgsp

Using jQuery to enhance the functionality of the drop-down select feature

I am facing an issue with my index file code. When I select something from the drop-down menu, I expect to see a related dropdown appear. Although I have added this code to my file, I am unable to get the drop down to show after selecting the main type. ...

javascripthtmljquerycss

The routing navigate method is failing to direct to the desired component

For the past day, I have been struggling to find a solution to my issue but without success. The routing seems to be malfunctioning as it keeps showing the HTML content from app.component.html even when I try changing the path in the URL. Here is a snippe ...

javascriptangulartypescripturl-routing

Make sure the "Treat labels as text" option is set to true when creating a chart in a Google spreadsheet using a script

I am currently working on a script using Google Spreadsheet Apps Script interface and I need to set the marker for 'Treat labels as text' to true. Despite searching through App Script documentation, I couldn't find any specific mention of t ...

javascriptchartsgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

Dynamically importing files in Vue.js is an efficient way to

Here's the code snippet that is functioning correctly for me var Index = require('./theme/dir1/index.vue'); However, I would like to utilize it in this way instead, var path = './theme/'+variable+'/index.vue'; var Inde ...

javascriptreactjsmeteorvue.jsvuejs2

Can someone guide me on incorporating bluebird promises with request-extensible?

I'm interested in utilizing the bluebird library to create a promise-based asynchronous web client. Currently, I have been using the request-promise package for this purpose. To get started, I simply include the following lines of code at the beginnin ...

javascriptnode.jshttppromisebluebird

Numerous checkboxes have been chosen alongside a submission button

I recently completed a small project involving multiple checkboxes using ajax. You can view the demo here. However, I am now looking to implement a submit button for filtering options. After selecting multiple checkboxes and clicking the submit button, onl ...

javascriptphpajaxbuttoncheckbox

There seems to be a problem fetching the WordPress menus in TypeScript with React and Next

Recently I've started working on a project using React with TypeScript, but seems like I'm making some mistake. When trying to type the code, I encounter the error message: "TypeError: Cannot read property 'map' of undefined". import Re ...

reactjstypescriptnext.js

Changing the default font size has no effect on ChartJS

I'm trying to customize the font size for a chart by changing the default value from 40px to 14px. However, when I set Chart.defaults.global.defaultFontSize to 14, the changes don't seem to take effect. Below is the code snippet for reference. An ...

typescriptchart.js

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

javascripthtmlcss

In Javascript, determine the root cause of a boolean expression failing by logging the culprit

Within my JavaScript code, I have a complex predicate that comprises of multiple tests chained together against a value. I am looking for a way to log the specific location in the expression where it fails, if it does fail. Similar to how testing librarie ...

javascripttypescriptreflection

As you scroll, this smooth marquee effect gently shimmers with each movement

I've been trying out this code to create a scrolling marquee text, but the issue is that after 7000 milliseconds it starts to jitter, which doesn't make the text look good. Any suggestions on how I can fix this problem? Let me know! <script ...

javascriptjqueryhtmlmarquee

Interacting with an iframe within the same domain

I'm currently working on an application in Angular 6 that requires communication with an iframe on the same origin. I'm exploring alternative methods to communicate with the iframe without relying on the global window object. Is there a more effi ...

javascriptangulariframebrowserrxjs