ngIf cryptic error when a then block is set to a non template

Edit (vicb) - the error is caused by the ngIf

<p *ngIf="user.removed; else activeBlock">User had been removed: {{user.removed | date : 'dd.MM.yyyy'}}</p>
<p #activeBlock>User is active</p>

The second <p> should be a <ng-template> but the error message does not help

Hi. Probably i found an error.

I’ve used ngIf block inside ngFor block also inside ngFor block placed another ngFor.

Like this:

<tr *ngFor="let user of users">
    <td>
        <p *ngFor="let login of users.logins">{{login}}</p>
    </td>
    <td>
        <p *ngIf="user.removed; else activeBlock">User had been removed: {{user.removed | date : 'dd.MM.yyyy'}}</p>
        <p #activeBlock>User is active</p>
    </td>
</tr>

And this throws error: templateRef.createEmbeddedView is not a function

I’m using this code now (instead previous):

<tr *ngFor="let user of users">
    <td>
        <p *ngFor="let login of users.logins">{{login}}</p>
    </td>
    <td>
        <p *ngIf="user.removed">User had been removed: {{user.removed | date : 'dd.MM.yyyy'}}</p>
        <p  *ngIf="!user.removed">User is active</p>
    </td>
</tr>

Thanks for attention.

[tamasfoldi]

Hi!

Try to put your else block into an <ng-template></ng-template> block as it shown in the changelog Like this:

<tr *ngFor="let user of users">
    <td>
        <p *ngFor="let login of users.logins">{{login}}</p>
    </td>
    <td>
        <p *ngIf="user.removed; else activeBlock">User had been removed: {{user.removed | date : 'dd.MM.yyyy'}}</p>
        <ng-template #activeBlock>
           <p>User is active</p>
       </ng-template>
    </td>
</tr>

[chai-jay]

@titusfx In short, yes.

The *ngIf directive is a structural directive with the asterisk character * being a syntatic sugar, and it expects you to pass <ng-template> for the else condition’s TemplateRef in the ngIf directive code to grab the referenced markup correctly. When you write <div *ngIf="showThis">Test</div>, it really becomes this:

<ng-template [ngIf]="showThis">
    <div>Test</div>
</ng-template>

And when you write this:

<div *ngIf="showThis; else thatTemplate>Test</div>
<ng-template #thatTemplate>
    <div>Else template</div>
</ng-template>

It gets desugared to something like this (I’m not 100% sure on this desugaring):

<ng-template [ngIf]="showThis" [ngIfElse]="thatTemplate">
    <div>Test</div>
</ng-template>
<ng-template #thatTemplate>
    <div>Else template</div>
</ng-template>

For more info, read these sections: https://angular.io/guide/structural-directives#what-are-structural-directives and https://angular.io/guide/structural-directives#the-asterisk--prefix.