Angular: ViewContainer isn't inserting component adjacent to anchor element, but nesting within the component itself

Question

I have created a tab view, with the following structure:

<tabs>
        <ul #getVCRefHERE >
            <li>tab1</li>
            <li>tab2</li>
        </ul>

        <tab>
            <ng-content></ng-content> <!--screen for tab2 -->
        </tab>
        <tab>
            <ng-content></ng-content> <!--content for tab1 -->
        </tab>
</tabs>

I create each component: tabs,tab,and the component placed in the ng-content. place. The issue is when I insert at the end of the ViewContainer(it uses ul as it's anchor element) the sequential tabs are nest inside of the tab like this:

<tabs>
            <ul #postionVCRef>
                <li>tab1</li>
                <li>tab2</li>
            </ul>

            <tab>
                <ng-content></ng-content> <!--screen for tab1 -->
                <tab>
                    <ng-content></ng-content> <!--content for tab2 -->
                </tab>
            </tab>

    </tabs>

It is fancy trick, but not helpful. When I insert at position 0 this weird nesting doesn't occur, but the tabs are inserted in opposite order than they were created which causes me issues later in my app.

The code that creates the tab with its projectable node looks like this:

// Tab == SubContainer,  Tabs == Container
    makeComp(component: Type<DynamicComponent>){
        let compFactory =this.compFR.resolveComponentFactory(component);
        let compRef = this.viewContainer.createComponent(compFactory);

        let length =this.viewContainer.length - 1;
        console.log(length)
        let subFactory = this.compFR.resolveComponentFactory(SubContainer); 
        let subRef = this.viewContainer.createComponent(subFactory,length,undefined,[[compRef.location.nativeElement]]);
        subRef.instance.title = compRef.instance.name;
        this.subList.push(subRef.instance);

      }

I feel the issue is probably in how I am creating the ng-content(projectable nodes). Unfortunately, I am unaware why the viewContainer appears to be using the tab's ng-content as the anchor element to insert the next tab.

I would really appreciate someone with better understanding of viewContainer to tell me why this might be occurring. Here is my sample app demonstrating this nesting behavior.

Adding a component dynamically adds it as sibling to the element that is used as `ViewContainerRef`. If you want the dynamically added comonent be a sibling of `
I just want the tab to inserted in the correct order,appended to the end when created. — Erik R, Sep 12 '17 at 16:52
Yes, see what you are saying, I don't necessarily need tab to be a sibling with li, it is fine if it is siblings with ul. I just need each tab to be put in the correct order like this. ul ,tabContent1,tabContent2,tabContent3 — Erik R, Sep 12 '17 at 16:57
The end is ViewContainerRef.length - 1 or at the end of the viewContainer. I can currently prepend, but I want to append to the viewContainer. — Erik R, Sep 12 '17 at 16:58
Sounds like this could be demonstrated with 1/3 of the code you have in the Plunker. This would make it easier to discuss what the expected behavior is and how the actual behavior deviates from that. — Günter Zöchbauer, Sep 12 '17 at 17:00
If I append the tab the subquential tabs will be nested inside each other. Ok I will reduce the code to make it easier. I have to run to a meeting. I'll put updated plnk soon — Erik R, Sep 12 '17 at 17:01
As you use the same `viewContainerRef` and insert `sub-container` in previous index then angular will take content node(`drop-down` on first step) as sibling element after that your new `sub-container` will be placed. You can avoid it by using different `ViewContainerRef`'s http://plnkr.co/edit/eqLXZDAxqTwi784eBANc?p=preview — yurzui, Sep 12 '17 at 17:21
@yurzui you never cease to amaze me, that is exactly what I needed. I just need you to elaborate on one part of your statement. "You can avoid it by using different ViewContainerRef's", I see you inject a vcRef and use it to make the component, and then use the other viewContainer to make the SubContainer. My question is aren't these two vcRefs referring to the same location? What makes it different using two vs one if they are referring to the same spot? If you could put this as your answer that would be really helpful and I'll accept it — Erik R, Sep 12 '17 at 19:10

mukund patel · Accepted Answer · 2018-07-17T11:24:28.460

Use this code to insert siblings of element where you apply selector of component. At your component:

import { HostListener,ComponentRef,EventEmitter,OnInit,ElementRef, Injectable ,Component,Input,Output,ViewContainerRef,ViewChild  } from '@angular/core';

At constructor

    constructor(private _vcr: ViewContainerRef,private _eref: ElementRef) {
}

At class

@ViewChild('Date') Date;
ngAfterViewInit() {
       this._vcr.createEmbeddedView(this.Date);  
    }

at template

<ng-template #Date>
// Your Html
</ng-template>

The natural behavior of using child selector is to insert the code of child template html inside the selector tags which are used in parent component. So we have to use createEmbeddedView function of ViewContainerRef [ Parent HTML Element]. If you want to provide some html with in selector tag fro parent to child then use inside child template.

Angular: ViewContainer isn't inserting component adjacent to anchor element, but nesting within the component itself

1 Answers1

Linked