*ngIf doesn't work with ng-template (ionic 5/angular 9)

Question

Here is my component.page.ts file

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-domestic',
  templateUrl: './domestic.page.html',
  styleUrls: ['./domestic.page.scss'],
})
export class DomesticPage implements OnInit {
  opchoice: string;

  constructor() { }

  ngOnInit() {
    this.opchoice = "From";
    console.log("OnInit opchoice? " + this.opchoice);
  }
  onFromToChange (ev: any) {
    console.log("OnFromToChange");
    this.opchoice = ev.detail.value;
    console.log("opchoice? >" + this.opchoice + "<");
  }
}

and the HTML file.

<ion-content>
  <ion-segment value="From" (ionChange)="onFromToChange($event)">
    <ion-segment-button value="From">Pickup From</ion-segment-button>
    <ion-segment-button value="To">Deliver To</ion-segment-button>
  </ion-segment>
  <div *ngIf="opchoice=='From'; then ShowFrom else ShowTo">
    <ng-template #ShowFrom class="ion-text-wrap ion-no-padding ion-no-margin">
            <ion-item>Domestic - Ship From</ion-item>
    </ng-template>
    <ng-template #ShowTo class="ion-text-wrap ion-no-padding ion-no-margin">
      <ion-item>Domestic - Ship To</ion-item>
    </ng-template>
  </div>
</ion-content>

However, the page doesn't display anything (it is empty) whether I click on the "Pickup From" or "Deliver To" Tabs/buttons.

Is there something I am doing wrong or have not understood about ng-template or ngIf? As you can see, I am printing the value of the opchoice variable and it prints correctly for each type of click. I have tried putting the ngIf in the ion-item, in an ion-grid and many other combinations, but none work.

I am using Ionic 5 with Angular 9. Any help is appreciated.

Answer 1

As I said before, you have to put the ng-templates at the same level. For me the cleanest solution is:

<div class="ion-text-wrap ion-no-padding ion-no-margin">
  <div *ngIf="opchoice=='From'; else ShowTo">
    <ion-item>Domestic - Ship From</ion-item>
  </div>
  <ng-template #ShowTo>
    <ion-item>Domestic - Ship To</ion-item>c
  </ng-template>
</div>