How do I make a nested ngFor? [Angular & Ionic]

Issue

I have a nested ngFor I want to use to render each area's items. How can I achieve my goal? It works if I move up my second ngFor into ion-segment-button but then all those items get rendered inside my button, which is not what I want.

HTML

<app-toolbar *ngIf="template" [title]="template.Template_code"></app-toolbar>
<ion-content *ngIf="template" fullsreen>
  <ion-grid fixed>
    <!-- AREAS -->
    <ion-row>
      <ion-col size="12">
      <!-- This ngFor works -->
        <ion-segment
          scrollable
          (ionChange)="onAreaChange($event)"
          value="{{ template.Version.Areas[0].Descriptions[0].Description }}"
        >
          <ion-segment-button
            *ngFor="let area of template.Version.Areas"
            value="{{ area.Descriptions[0].Description }}"
          >
            <ion-label>
              {{ area.Descriptions[0].Description }}
            </ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-col>
    </ion-row>

    <!-- How do I make area work here? -->
    <ion-row *ngFor="let item of area.Items">
      <ion-col size="12">
        <div>
          {{ item }}
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Solution

just try this:

<ng-container *ngFor="let verArea of template.Version.Areas">
   <ion-row>
  <ion-col size="12">
  <!-- This ngFor works -->
    <ion-segment
      scrollable
      (ionChange)="onAreaChange($event)"
      value="{{ template.Version.Areas[0].Descriptions[0].Description }}"
    >
      <ion-segment-button
        *ngFor="let area of template.Version.Areas"
        value="{{ area.Descriptions[0].Description }}"
      >
        <ion-label>
          {{ area.Descriptions[0].Description }}
        </ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-col>
</ion-row> 
</ng-container>

Answered By - Running Rabbit