Angular 12 - *ngIf;Then;Else - 必须是 TemplateRef，但收到“[object HTMLInputElement]”

Question

After migrating Angular 6.x to Angular 12.x, I'm facing template related issues.

UPDATED

I've my code like this

    <table>
  <thead></thead>
  <tr>
    <th>
      <input #selectAll type="checkbox" [checked]="myFunctionName()" (click)="toggleSelection()"
      />
    </th>
    <th>
      <span *ngIf="myFunctionName(); then removeAll ; else selectAll"></span>
      <ng-template #selectAll>{{SELECT_ALL}}</ng-template>
      <ng-template #removeAll>{{DESELECT_ALL}}</ng-template>
    </th>
  </tr>
</table>

Below error i got

ERROR Error: ngIfElse must be a TemplateRef, but received '[object HTMLInputElement]'

What i tried?

<table>
      <thead></thead>
      <tr>
        <th>
          <input #selectAll type="checkbox" [checked]="myFunctionName()" (click)="toggleSelection()"
          />
        </th>
        <th>
          <ng-container *ngIf="myFunctionName(); then removeAll ; else selectAll"></ng-container>
          <ng-template #selectAll>{{SELECT_ALL}}</ng-template>
          <ng-template #removeAll>{{DESELECT_ALL}}</ng-template>
        </th>
      </tr>
    </table>

ts

@ViewChild('selectAll' , {static: true}) selectAll!: ElementRef<HTMLInputElement>;
    myFunctionName(): boolean {
      if (this.checkboxes) {
        // other stufs
      }
      return false;
    }

Could someone help me how to can refactor pieces?

Thanks for the help guys

Answer 1

This should fix your error:

<table>
  <thead></thead>
    <tr>
      <th>
        <ng-container *ngIf="myFunctionName(); else selectAll">
          {{someEslePartWillComeHere}}
        </ng-container>
        <ng-template #selectAll>{{someThenableContentGoesHere}}</ng-template>
      </th>
    </tr>
</table>

The ngIf directive should wrapper the content that you want to show when condition is true .

Answer 2

Your code is fine, except the template reference variable used in ng-template. For example: there should not be any properties in your class as in the same name as #selectAll and #removeAll references

<ng-template #selectAll>{{someThenableContentGoesHere}}</ng-template>
<ng-template #removeAll>{{someEslePartWillComeHere}}</ng-template>

Answer 3

so the problem is very simple, you have #selectAll twice in your HTML code. to fix this you need to rename one of them

<ng-container *ngIf="myFunctionName(); then removeAllBlock; else selectAllBlock"></ng-container>
<ng-template #selectAllBlock>{{SELECT_ALL}}</ng-template>
<ng-template #removeAllBlock>{{DESELECT_ALL}}</ng-template>

and if you use the selectAll input only in your function, you don't need the @ViewChild but you can do it like this: (just an improvement, not mandatory)

 <input #myInput type="checkbox" [checked]="myFunctionName()" (click)="toggleSelection(myInput)"/>

toggleSelection(myInput:HTMLInputElement){
// do stuff with your input
}