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 <li>tab2</li>, then this is the element where you need to add #getVCRefHERE — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 12, 2017 at 16:51
I just want the tab to inserted in the correct order,appended to the end when created. — Erik R
– Erik R, Commented Sep 12, 2017 at 16:52
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 plnkr.co/edit/eqLXZDAxqTwi784eBANc?p=preview — yurzui
– yurzui, Commented Sep 12, 2017 at 17:21

mukund patel · Accepted Answer · 2018-07-17 11:24:28Z

4

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.

edited Jul 17, 2018 at 11:24

answered Dec 7, 2017 at 13:01

mukund patel

1,05210 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related