I think createEmbeddedView() is injecting TemplateRef in wrong location.

[bennadel]

I'm submitting a bug report.

Current behavior

When a TemplateRef is passed into another component and then stamped-out using the ViewContainerRef, it appears to be injecting the TemplateRef relative to the original location, not relative to the current ViewContainerRef. I noticed this when trying something on my own. However, when I came across this behavior, I went and looked at the NG2 specs and it seems that your tests actually show the same behavior.

I took your specs and pasted them into a Plunkr: https://plnkr.co/edit/z6LBzUPkcfPHznGz66IW?p=preview

Notice that the TemplateRef (green border) is being rendered next to the ViewContainerRef (red border). I think the tests still pass because they are only checking the text output of the resultant view, not the actual DOM structure. The text output happens to still be correct, in this case, but the hierarchy is wrong .... I think.

Expected/desired behavior

I believe that the TemplateRef should be injected into the ViewContainerRef.

Please tell us about your environment:

Running on Chrome Version 50.0.2661.102 (64-bit)

Angular version: 2.0.0-beta.17 (Plunkr) and RC1 (locally) -- both show the same behavior.

Language: TypeScript

[pkozlowski-opensource]

@bennadel are you saying that createEmbeddedView() is inserting next to location instead of into location?

I was always under the impression that view containers are marking insertion points next to an element with witch a given view container is associated. So for me the behavior in the linked plunk seems good. Still @tbosch could confirm.

In any case I agree that it would probably make sense to update tests to show expected behavior explicitly.

[bennadel]

@pkozlowski-opensource it is very possible that I am mistaken in the intent. I am just learning this stuff. That said, it seems odd to pass the template into another directive only to have that template be rendered outside said directive. It seems a bit misleading.

[zoechi]

You can acquire a ViewContainerRef using @ViewChild('target', {read: ViewContainerRef}) target:ViewContainerRef;(set when ngAfterViewInit() is called) from template: ['<div #target></div>. If you use this one it will be added inside the component. See also http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 (uses createComponent)

[bennadel]

@zoechi I am a bit confused; how can I use a ViewChild when the directive that is receiving the template has no View (it's just an attribute directive in this case).

Also, to be clear - are you saying the behavior is expected? Or, are you just giving me a work-around?

[ericmartinezr]

@bennadel that's the expected behavior, in fact you're not the only one confused about it, check #8529 where RouterOutlet uses ViewContainerRef + ComponentResolver. But yes, it is like when you used loadNextToLocation/loadIntoLocation with DCL.

[pkozlowski-opensource]

@bennadel so here is my mental model, hope it is not going to get destroyed as the result of the discussion in this issue :-)

A View is a bunch of elements (more complex than this but will do for the discussion here). Each element can have an associated ViewContainer. I think about it as a hook (a physical one) attached to an element on which you can "hang" other views. It also happens that elements can have associated directives as well.

Now when you are injecting a ViewContainerRef in a directive you are saying: I want to potentially attach something to you, give me a container (a hook) associated with an element on which I'm living. So you are injecting a ViewContainer associated with an element, directives are not creating view containers, just interact with them.

Then if you insert something into a ViewContainer those things show up as siblings to an element with which a ViewContainer is associated with. This would makes sense since you could ask for a ViewContainer for an element that don't have content (ex. <hr>). Didn't try but I would expect it to work.

Now, I hope that @tbosch will chime-in and put right words on our confused terminology / explanations.

[bennadel]

@pkozlowski-opensource ah, very interesting. I need to let that bounce around in my head a bit more. Would it matter if the item in the *ngFor is a component vs. attribute directive? Meaning, would:

<div *ngFor="..." myDirective></div>

.... be the same as:

<my-directive *ngFor="..."></my-directive>

Can both of those assume that they are not their own view container?

[pkozlowski-opensource]

@bennadel regarding your latest example, I think it is easier to see it if you de-sugar * syntax which would give you:

<template ngFor ...>
    <div myDirective></div>
</template> 

and

<template ngFor ...>
    <my-directive></my-directive>
</template> 

In both cases a view container to which you insert things created by ngFor are attached to the <template> element so what goes into a template and which directives are present inside a template doesn't really matter.

Once again, IMO it helps to think about elements to which you can attach other views, directives etc. At least this is my mental model. And of course I might be totally wrong :-)

[bennadel]

@pkozlowski-opensource re: the Attribute directive vs. Element directive, I guess I was just trying to get at the fact that one as a View associated with it, and only only uses the the content from another view.

To think about this from internal to a component, then, imagine I have this as a component:

@Component({ .... })
export class SomeComponent {
    constructor( vc: ViewContainerRef ) { ... }
}

.... is the vc in this case never the host element no matter what? Is the vc basically the parent of the SomeComponent instance?

[pkozlowski-opensource]

@bennadel so assuming that your SomeComponent has a selector of <some-component> and you use it in HTML you are going to inject VCRef associated with the <some-component> element.

guess I was just trying to get at the fact that one as a View associated with it, and only only uses the the content from another view.

Not sure I understand this part :-)

[tbosch]

@pkozlowski-opensource your mental model is right. In the implementation we optimize a bit in that we only create a ViewContainerRef where users ask for them via queries or DI.

[bennadel]

@pkozlowski-opensource Yes, exactly - SomeComponent is an element, <some-component>. A more fleshed out pseudo code might look like this:

@Component({
    selector: "some-component",
    inputs: [ "extraTemplate" ],
    template: "This is a nice component. Yay!"
})
export class SomeComponent implements AfterViewInit {
    constructor( public vc: ViewContainerRef ) { ... }

    ngAfterViewInit() {
        this.vc.createEmbededView( this.extraTemplate, {} );
    }
}

Basically, if some Component is injected with a Template, it needs a way to then render that template in its own View, which I assumed you would do via the ViewContainerRef. But, from what you're saying, I think, the ViewContainerRef is never the host element - it's always the container that the host element is also in?

[pkozlowski-opensource]

But, from what you're saying, I think, the ViewContainerRef is never the host element - it's always the container that the host element is also in?

I would rather say it like this: "A ViewContainer injected into a given directive (regardless if this is a component or a simple directive) is the one associated with an element on which a given directive matched".

Think about like this: elements has pointers to ViewContainers. If you insert something into a ViewContainer it will be added as a sibiling of a given element (remember you might have elements without content). A ViewContainer can be associated with a given element even if there is no directive on this element. So in this respect presence or not of a directive (simple directive or a component) doesn't change anything and somehow is not relevant.

I hope that we can close this one now that Tobias confirmed that it works as intended / explained here. But we can surely continue the discussion - it is important for me that the mental model is clear to everyone as in the end this quite simple system.

[bennadel]

@pkozlowski-opensource So, going back to the StackOverflow item you posted earlier, it sounds like there's no way to dynamically render an injected templateRef without creating an "inner DOM element" to give you something to query for the ViewContainerRef.

It would be nice if I we could use an HTML comment as a ref:

template: "<!-- #anchor -->"

... and then query for that:

queries: {
    anchor: new ViewChild( "anchor", { read: ViewContainerRef } )
}

Anyway, I appreciate all of the insight. For what its worth, as the first time thinking about this stuff, it's not quite so simple :) Especially coming from Angular 1.x where, I could transclude content and just .append() it to the host element. But, I know the two systems are very different. Thank you for taking the time to help. I really appreciate it.