Angular 5: dynamic component swapping

Question

Angular 5: dynamic component swapping

I am facing a challenge with dynamically placing components inside the view and need to switch their positions.

For instance, I have dynamically created components with ids 1 and 2, as shown in the figure linked below.

https://i.sstatic.net/hgxd2.jpg

Now, the task at hand is to swap the positions of these two components. But how can this be achieved?

Theoretically, I know that the location can be altered using the 'move' method within the ViewContainerRef class through an object like so:

viewContainerRef.move(componentRef.hostView, index)

.

I attempted to implement this method but unfortunately, the positions did not actually swap.

@ViewChild(ContainerRefDirective) location: ContainerRefDirective;

let componentFactory = this.factoryResolver.resolveComponentFactory(EntryComponent);
let componentRef = this.location.viewContainerRef.createComponent(componentFactory);

let entryComponent: EntryComponent = componentRef.instance;
// Assuming the counter variable increments with each new component creation.
entryComponent.Id = ++counter; 

// The move method is invoked immediately after creating and placing a new component.
// This snippet of code resides within the same method responsible for dynamic component creation.
this.location.viewContainerRef.move(componentRef.hostView, 1);

I have thoroughly reviewed the documentation on ViewContainerRef provided on angular.io and also looked into similar questions related to this matter. However, I seem to be struggling to comprehend or resolve this issue.

angular typescript angular5

Answer 1

Answer №1

Have you considered binding your two dynamic components to an array instead? Here's an example:

this.dynamicComponents.push(dynamicComponentA);
..
this.dynamicComponents.push(dynamicComponentB);

Your HTML structure would then look like this:

<ng-container *ngFor="let component of dynamicComponents">
   <<You can reference dynamicComponentA and dynamicComponentB by using "component.value" etc.>>
</ng-container>

If you ever need to switch the positions of these components, simply manipulate the array and Angular will take care of the rest:

this.dynamicComponents = this.dynamicComponents.reverse();

This will automatically re-render the containers in a new order. You can check out a working example here.

Answer 2

Have you considered binding your two dynamic components to an array instead? Here's an example:

this.dynamicComponents.push(dynamicComponentA);
..
this.dynamicComponents.push(dynamicComponentB);

Your HTML structure would then look like this:

<ng-container *ngFor="let component of dynamicComponents">
   <<You can reference dynamicComponentA and dynamicComponentB by using "component.value" etc.>>
</ng-container>

If you ever need to switch the positions of these components, simply manipulate the array and Angular will take care of the rest:

this.dynamicComponents = this.dynamicComponents.reverse();

This will automatically re-render the containers in a new order. You can check out a working example here.

Answer 3

Answer №2

Solved the issue successfully.

My Solution Technique

To address the problem, I opted to change the values instead of moving the components around.

In other words, I swapped the values 1 <=> 2 which gave the illusion that the components had been interchanged.

Implementation Steps

// initializing an array to store the newly created component instances
entryComponents: EntryComponent[] = new Array<EntryComponent>();

Add the newly created component to this array

let factoryResolver = this.factoryResolver.resolveComponentFactory(EntryComponent);    
let componentRef = this.location.viewContainerRef.createComponent(factoryResolver);

this.entryComponents.push(componentRef.instance); // retrieving components' instances

Finally, swap the values in order to create the appearance of component interchange.

Credits to @ForestG for providing this helpful suggestion

Answer 4

Solved the issue successfully.

My Solution Technique

To address the problem, I opted to change the values instead of moving the components around.

In other words, I swapped the values 1 <=> 2 which gave the illusion that the components had been interchanged.

Implementation Steps

// initializing an array to store the newly created component instances
entryComponents: EntryComponent[] = new Array<EntryComponent>();

Add the newly created component to this array

let factoryResolver = this.factoryResolver.resolveComponentFactory(EntryComponent);    
let componentRef = this.location.viewContainerRef.createComponent(factoryResolver);

this.entryComponents.push(componentRef.instance); // retrieving components' instances

Finally, swap the values in order to create the appearance of component interchange.

Credits to @ForestG for providing this helpful suggestion

Answer 5

Answer №3

Although I have not experimented with this myself, it seems like the move method may not be the appropriate approach based on what I've read in the documentation. It appears that the move method is intended for "adding" an existing component to the view.

According to the documentation for detach:

Use along with insert to move a View within the current container.

Given that description, my suggestion would be...

let ref = this.location.viewContainerRef;
ref.detach(ref.indexOf(componentRef.hostView));
ref.insert(componentRef.hostView, 0);

Edit I successfully implemented an example using Angular's live example of Dynamic Component Loader.

Here is the relevant code:

// ShaneCoder - don't clear so we get multiple ads to demonstrate move.
// viewContainerRef.clear();

// ShaneCoder - only create 4 ads
if (viewContainerRef.length<4) {

    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;

    // ShaneCoder ad is inserted at the bottom (no index parameter).  Move it up if there are multiple ads.
    if (viewContainerRef.length>=1) {
        // we're not the first ad
        // move new ad to top using detach and insert (the next two lines answer the original question)
        viewContainerRef.detach(viewContainerRef.indexOf(componentRef.hostView));
        viewContainerRef.insert(componentRef.hostView, 0);
        // comment out the previous two lines to see that ads are inserted at the bottom.
    }
}

Edit 2

After posting the last edit realized I hadn't tried move. Switched the detach and insert out for a move and it works. Example here. Relevant code:

viewContainerRef.move(componentRef.hostView, 0);
// comment out the previous two lines to see that ads are inserted at the bottom.

Now I'm wondering if the problem you were fighting with move was its zero-index. To make a component the first in a container view you need to pass a zero for the index. To make it second pass a one and so on. So your code would change like such:

this.location.viewContainerRef.move(componentRef.hostView, 0);

Answer 6

Although I have not experimented with this myself, it seems like the move method may not be the appropriate approach based on what I've read in the documentation. It appears that the move method is intended for "adding" an existing component to the view.

According to the documentation for detach:

Use along with insert to move a View within the current container.

Given that description, my suggestion would be...

let ref = this.location.viewContainerRef;
ref.detach(ref.indexOf(componentRef.hostView));
ref.insert(componentRef.hostView, 0);

Edit I successfully implemented an example using Angular's live example of Dynamic Component Loader.

Here is the relevant code:

// ShaneCoder - don't clear so we get multiple ads to demonstrate move.
// viewContainerRef.clear();

// ShaneCoder - only create 4 ads
if (viewContainerRef.length<4) {

    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;

    // ShaneCoder ad is inserted at the bottom (no index parameter).  Move it up if there are multiple ads.
    if (viewContainerRef.length>=1) {
        // we're not the first ad
        // move new ad to top using detach and insert (the next two lines answer the original question)
        viewContainerRef.detach(viewContainerRef.indexOf(componentRef.hostView));
        viewContainerRef.insert(componentRef.hostView, 0);
        // comment out the previous two lines to see that ads are inserted at the bottom.
    }
}

Edit 2

After posting the last edit realized I hadn't tried move. Switched the detach and insert out for a move and it works. Example here. Relevant code:

viewContainerRef.move(componentRef.hostView, 0);
// comment out the previous two lines to see that ads are inserted at the bottom.

Now I'm wondering if the problem you were fighting with move was its zero-index. To make a component the first in a container view you need to pass a zero for the index. To make it second pass a one and so on. So your code would change like such:

this.location.viewContainerRef.move(componentRef.hostView, 0);

Angular 5: dynamic component swapping

Answer №1

Answer №2

My Solution Technique

Implementation Steps

Answer №3

Similar questions

Is there a method to initiate a 'simple' action when dispatching an action in ngrx?

There was an issue encountered while trying to execute npm install, resulting in the error message: "This is a glitch

Issue with Ionic Capacitor React & Typescript build process for Firebase Functions

Is it possible for the input change event to not function properly on an input form control?

ts1109: An error occurred as there was an expectation for an angular

Utilizing Tick formatting in Chart.js with Typescript: A step-by-step guide

What steps should be taken to find a particular route when a user logs in for the first time?

What are the best ways to resolve the warning from webpack in Express?

Showing the Enum name rather than the value in an Angular HTML template for a bound Typescript Interface

The compilation of Angular8 ngx-bootstrap fails when using the --prod flag

Tips for displaying an object's properties using ngfor?

It is not possible to alter the styles of the ng-daterangepicker Angular plugin

Consolidating repeated data objects found in the response

What could be causing the error in Angular 2 when using multiple conditions with ng-if?

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

Typescript fails to detect class constructor mismatches

Determine data type using the generic type of a related property in Typescript

Explanation on How to utilize the $( document ).ready() jQuery function within the ngAfterViewInit() on a Component class using Angular 2

Ways to cite a vendor in static class functions?