<ion-select-option> looping one ngfor loop inside another

Issue

I'm fairly new to Ionic so please bear with me.

I've managed to create a very simple array called Events that has another small array inside it:

$key: "12345566778"
dates: Array(3)
  0: Tue Feb 23 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
  1: Wed Feb 24 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
  2: Thu Feb 25 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
title: "Quality"
startDate: "2021-02-23"

$key: "314351632623"
dates: Array(3)
  0: Wed Feb 17 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
  1: Thu Feb 18 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
  2: Fri Feb 19 2021 00:00:00 GMT+0000 (Greenwich Mean Time) {}
title: "Equality"
startDate: "2021-02-17"

What I really want to do is display them in an list in the following format:

Quality 
- Tue Feb 23 2021
- Wed Feb 24 2021
- Thu Feb 25 2021
Equality
- Wed Feb 17 2021
- Thu Feb 18 2021
- Fri Feb 19 2021

But at the moment I only know how to cycle through the events array with one ngFor, which isn't what I'm wanting to do:

<ion-select-option *ngFor="let event of Events" value="{{event.title}} - {{event.startDate}}">{{event.title}} - {{event.startDate}}</ion-select-option>

Does anyone know how I can achieve this please?

Solution

You just need to nest another loop to achieve that. It'd look like this:

<ion-item *ngFor="let event of Events">
  <ion-label>{{ event.title }}</ion-label>
  <ion-select>
    <ion-select-option *ngFor="let eventDate of event.dates" [value]="eventDate">
      {{ eventDate | date:'EEE LLL dd yyyy' }}
    </ion-select-option>
  </ion-select>
</ion-item>

You'd probably need to edit that code based on your specific UI, but the main idea is to have one loop for the events, and another loop for the dates on each event.

Please also notice that I'm using the Angular date pipe to format the eventDate (https://angular.io/api/common/DatePipe)

---

EDIT:

I'm trying to get all the results sitting within one ion-select, each as an option. Then I was going to make the titles unselectable and the whole thing multiple choice but that's not really important here.

For some reason I assumed you wanted multiple ion-selects but that makes perfect sense.

In that case, you can use <ng-container></ng-container> to create a nested loop without creating an element that will be rendered in the view.

I think something like this should work (I'm editing the code directly in the browser so you may need to fix a few things, but the main idea at least should be clear).

<ion-item>
  <ion-label>Options</ion-label>
  <ion-select>
    <ng-container *ngFor="let event of Events">

      <!-- Title --> 
      <ion-select-option disabled="true">
        {{ event.title }}
      </ion-select-option>

      <!-- Options -->
      <ion-select-option *ngFor="let eventDate of event.dates" [value]="eventDate">
        {{ eventDate | date:'EEE LLL dd yyyy' }}
      </ion-select-option>
    </ng-container>
  </ion-select>
</ion-item>

Answered By - sebaferreras