if statement - How to make a if-else Angular template with only ng-container?

Question

I would like to make an if-else statement in my angular template. I started with that :

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-template #newDeb>
    [... HERE IS A RESULT 2]
</ng-template>

And I tried to only use ng-container :

<ng-container *ngIf="contributeur.deb; else newDeb" >
    [... HERE IS A RESULT 1]
</ng-container>
<ng-container #newDeb>
    [... HERE IS A RESULT 2]
</ng-container >

Unfortunately, this does not work. I have this error :

ERROR TypeError: templateRef.createEmbeddedView is not a function
    at ViewContainerRef_.createEmbeddedView (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10200:52)
    at NgIf._updateView (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:2013:45)
    at NgIf.set [as ngIfElse] (eval at <anonymous> (vendor.bundle.js:96), <anonymous>:1988:18)
    at updateProp (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:11172:37)
    at checkAndUpdateDirectiveInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:10873:19)
    at checkAndUpdateNodeInline (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12290:17)
    at checkAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12258:16)
    at debugCheckAndUpdateNode (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12887:59)
    at debugCheckDirectivesFn (eval at <anonymous> (vendor.bundle.js:11), <anonymous>:12828:13)
    at Object.eval [as updateDirectives] (ActionsButtons.html:5)

Can anyone explain me what is going wrong in this code ?

question from:https://stackoverflow.com/questions/44287846/how-to-make-a-if-else-angular-template-with-only-ng-container

Answer 1

The code for the ngIf directive expects to be passed a reference to a template (TemplateRef) for the else branch, which it will call createEmbeddedView on to display the nested content. Therefore, it makes no sense to try to use any other kind of element for the else content - it just won't work. You're able to nest an ng-container inside the ng-template if needs be, though.

This might seem unintuitive, but bear in mind that structural directives (i.e. ones that you call with a *) are always represented as ng-template under the hood, no matter what kind of element they're attached to - these two pieces of code are the same:

<ng-container *ngIf="contributeur.deb; else newDeb" >
    ...
</ng-container>
<ng-template #newDeb>
    ...
</ng-template>

---

<ng-template [ngIf]="contributeur.deb; else newDeb">
    <ng-container>
        ...
    </ng-container>
</ng-template>
<ng-template #newDeb>
    ...
</ng-template>