Is there a way to dynamically insert an existing component in Angular?

Question

I have a situation in which Angular thinks it needs to recreate components, instead of just using the old component, which leads to components 'refreshing' after dragging them to another place in my interface. I have a tree, from which I generate components. The following is a simplified version of my tree:

{
  "left": {
    "type": "FirstComponent"
  },
  "right": {
    "left": {
      "type": "SecondComponent"
    },
    "right": {
      "type": "ThirdComponent"
    }
  }
}

After dragging of the components to another position:

{
  "left": {
    "left": {
      "type": "FirstComponent"
    },
    "right": {
      "type": "ThirdComponent"
    }
  },
  "right": {
    "type": "SecondComponent"
  }
}

I dynamically insert the component in my DockComponent like this:

private panelRef: ComponentRef<any>;

ngOnChanges() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.panel.type);
  this.dynamicInsert.clear();
  this.panelRef = this.dynamicInsert.createComponent(componentFactory);
}

Whenever I change the tree, the tree gets regenerated, so the components get built from the ground up. I tried to save this.panelRef.instance within my dockTree, but this.panelRef.instance is readonly, so I can't do anything with it. I tried saving this.panelRef.instance and set all properties of this.panelRef.instance to the properties of the saved instance. This got everything all messed up.

Is there a way to dynamically insert an existing component in Angular?

[edit]

Based on the answer of Ilia, I tried to save the ViewRefs in my tree.

 export class DockTreeContainer extends DockTreeNode {
   private orientation: Orientation;
   private left: DockTreeNode;
   private right: DockTreeNode;
 }

 export class DockTreePanel extends DockTreeNode {
   type: Type<DockablePanel>;
   ref?: ViewRef;
 }

The tree exists of DockTreeNodes, that can be either a DockTreeContainer, holding two DockTreeNodes, or a DockTreePanel, holding the type of the panel. I added the ViewRef, setting it in my DockComponent:

ngOnInit() {
  if (this.panel.ref) {
    this.insertExistingComponent();
  } else {
    this.createNewComponent();
  }
}

private createNewComponent() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.panel.type);
  this.panelRef = this.dynamicInsert.createComponent(componentFactory);
  this.initializePanel(this.panelRef.instance);
  this.panelRef.instance['panel'] = this.panel;
  this.panel.ref = this.dynamicInsert.get(0);
}

private insertExistingComponent() {
  this.dynamicInsert.clear();
  this.dynamicInsert.insert(this.panel.ref);
}

Unfortunately this didn't work, because my components are recursively created using the tree like this:

<div class="dock-orientation {{getOrientation()}}">
  <div *ngIf="isPanel(dockTree.getLeft()); then leftDock else leftContainer"></div>
  <div *ngIf="isPanel(dockTree.getRight()); then rightDock else rightContainer"></div>
</div>

<ng-template #leftDock>
  <ct-dock class="dock-node dock" [panel]="leftAsPanel()"></ct-dock>
</ng-template>

<ng-template #rightDock>
  <ct-dock class="dock-node dock" [panel]="rightAsPanel()"></ct-dock>
</ng-template>

<ng-template #leftContainer>
  <ct-dock-container class="dock-node dock-container" [dockTree]="leftAsContainer()"></ct-dock-container>
</ng-template>

<ng-template #rightContainer>
  <ct-dock-container class="dock-node dock-container" [dockTree]="rightAsContainer()"></ct-dock-container>
</ng-template>

Moving one of the panels can put it in a completely different place in the tree, which causes Angular's change detection to be triggered. By the time my ngOnInit in the DockComponent is called, the saved reference I am trying to restore is already destroyed.

Is there still a way to solve this, or should I try to add all my recursion into one component while hoping my refs will not yet be destroyed?

[edit2]

So, I got to the part where I can actually detach my components within time, so I can re-attach them later. However, all panels are being detached, but not all panels are initializing, resulting in some panels dissapearing when moving other panels around.

// getTreeChange is an Observable that gets triggered after each change in the dockTree, which detaches all the panels in the application.
ngOnInit(): void {
  // Detach our panel on changes in the dockTree
  this.dockTreeSub = this.dockerService.getTreeChange().subscribe((value) => {
    if (value !== '') {
      if (this.dynamicInsert.length > 0) {
        this.detachPanel();
      }
    }
  });
}

ngAfterViewInit(): void {
  if (this.panel.ref) {
    this.insertExistingComponent();
  } else {
    this.createNewComponent();
  }
}

/**
 * Creates a new component and inserts it into the Dock
 */
private createNewComponent() {
  console.log('No panel ref found, creating new component');
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.panel.type);
  this.panelRef = this.dynamicInsert.createComponent(componentFactory);
  this.initializePanel(this.panelRef.instance);
  this.panelRef.instance['panel'] = this.panel;
}

/**
 * Takes the old ViewRef from memory and inserts that into the Dock
 */
private insertExistingComponent() {
  if (this.panel.ref.destroyed) {
    throw new Error('Found destroyed panel');
  }
  console.log('Found intact panel, inserting');
  this.dynamicInsert.clear();
  this.dynamicInsert.insert(this.panel.ref);
}

/**
 * Detach the panel from this Dock and save it in the DockTree
 */
private detachPanel() {
  console.log('Detaching!');
  this.panel.ref = this.dynamicInsert.get(0);
  this.dynamicInsert.detach(0);
}

[edit3]

Finally got this to work. I am using the AfterViewChecked hook to see if we already initialized a panel. If not, we re-use the old one. AfterViewChecked gave problems with the change detection, so you need to call detectChanges()! Accepting Ilia's answer as it helped me figure it out.

ngOnInit(): void {
    // Detach our panel on changes in the dockTree
    this.dockTreeSub = this.dockerService.getTreeChange().subscribe((value) => {
      if (value !== '') {
        if (this.dynamicInsert.length > 0) {
          this.detachPanel();
        }
      }
    });

    if (!this.panel.ref && this.dynamicInsert.length <= 0) {
      this.createNewComponent();
    }
  }

  /**
   * Check if the panel needs to be re-inserted after moving panels
   */
  ngAfterViewChecked(): void {
    if (this.panel.ref && this.dynamicInsert.length <= 0) {
      this.insertExistingComponent();
    }
    this.changeDetector.detectChanges();
  }

Solution is complex.. what if detach ViewRef from current ViewContainerRef before it's component will be destroyed (in ngOnDestroy)? In this way, ViewRef should not be destroyed. And destroy them in ngOnDestroy of parent component to prevent memory leak. — Ilia Volk
– Ilia Volk, Commented Mar 14, 2018 at 9:44
I subscribed to an Observable which I call next on if I change the tree. So every panel gets their ViewRef detached. Every panel that actually has a change goes through init and everything, but not all panels are triggered by change detection. — Kay van Bree
– Kay van Bree, Commented Mar 15, 2018 at 8:23

Ilia Volk · Accepted Answer · 2018-03-13 16:38:08Z

5

@Component({
  template: 'dynamic <input>',
})
export class DynamicComponent {}


@Component({
  selector: 'hello',
  template: `
  <ng-container #firstContainer></ng-container>
  <ng-container #secondContainer></ng-container>
  <button (click)="swap()">swap</button>`,
})
export class HelloComponent  {
  @ViewChild('firstContainer', {read: ViewContainerRef}) firstContainer: ViewContainerRef;
  @ViewChild('secondContainer', {read: ViewContainerRef}) secondContainer: ViewContainerRef;
  factory;
  constructor(resolver: ComponentFactoryResolver) {
    this.factory = resolver.resolveComponentFactory(DynamicComponent);
  }
  ngOnInit() {
    this.firstContainer.createComponent(this.factory);
    this.secondContainer.createComponent(this.factory);
  }
  swap() {
    const first = this.firstContainer.get(0);
    const second = this.secondContainer.get(0);
    this.firstContainer.detach(0);
    this.secondContainer.detach(0);
    this.firstContainer.insert(second);
    this.secondContainer.insert(first);
  }
}

answered Mar 13, 2018 at 16:38

Ilia Volk

5563 silver badges9 bronze badges

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

3 Comments

Kay van Bree Over a year ago

I tried to do something like this. The problem is I am using the tree to recursively create components that insert a view. By the time ngOnInit fires for my DockComponent, the old ViewRefs have all been destroyed. I can't really swap like this, because the swapping doesn't always occur within the same component.

Flater Over a year ago

Answer should consists of more than just a code snippet. Explain why your suggestion works, why the OP's code doesn't, and how the two are different.

Kay van Bree Over a year ago

It took some more digging, but this was the core of the answer.

Collectives™ on Stack Overflow

Is there a way to dynamically insert an existing component in Angular?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related