How to fix Angular ROR Error: ngIfElse must be a TemplateRef, but received '[object HTMLDivElement]'.

Problem:

Your Angular template looks like this:

<div *ngIf="files.length > 0 ; else noFiles">
    <!-- ... -->
</div>
<div #noFiles>
    <!-- ... -->
</div>

but when you open it in the browser, you see the following stacktrace:

c_my_module.js:2 ERROR Error: ngIfElse must be a TemplateRef, but received '[object HTMLDivElement]'.
    at assertTemplate (common.mjs:3392:15)
    at set ngIfElse [as ngIfElse] (common.mjs:3328:9)
    at setInputsForProperty (core.mjs:11741:34)
    at elementPropertyInternal (core.mjs:10874:9)
    at ɵɵproperty (core.mjs:13637:9)
    at PlanungsunterlagenDashboardComponent_Template (planungsunterlagen-dashboard.component.html:8:55)
    at executeTemplate (core.mjs:10534:9)
    at refreshView (core.mjs:10419:13)
    at refreshComponent (core.mjs:11480:13)
    at refreshChildComponents (core.mjs:10210:9)

Solution

The error message is telling you that #noFiles is a <div> but it must be a <ng-template>:

In order to fix it, change it to a ng-template:

<ng-template #noFiles>
    <!-- ... -->
</ng-template>

If you need a <div> specifically, you need to place it inside the ng-template:

<ng-template #noFiles>
    <div>
        <!-- ... -->
    </div>
</ng-template>