ion-select in Ionic Angular

Question

I want to select a Restaurant name and after i select it to have on the page only the food from that restaurant, but it doesn't work. After I select one restaurant from the list nothing happens.

Here is my .html file :

  <ion-item class="restaurant">
    <ion-label>Restaurant</ion-label>
    <ion-select class="RestaurantSelect" [(ngModel)]="restaurant">
      <ion-select-option *ngFor="let restaurant of restaurants" [value]="restaurant">
        {{restaurant.name}}
      </ion-select-option>
    </ion-select>


  <ion-list>
  <ion-item lines="none" *ngFor="let f of restaurant; let i=index">
<!--    <ng-container *ngFor="let f of rest">-->
    <ion-thumbnail slot="start">
      <ion-img [src]="f.photo"></ion-img>
    </ion-thumbnail>

    <ion-label>{{f.food.name}}
      <ion-buttons>
        <ion-button  color="dark">Edit
          <ion-icon slot="start" name="create"></ion-icon>
        </ion-button>
        <ion-button color="dark" (click)="remove(i)">Delete
          <ion-icon slot="start" name="trash"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-label>
<!--    </ng-container>-->

  </ion-item>

  </ion-list>

  </ion-item>
</ion-content>

I have do declare an array of arrays : each restaurant has more types of food, and also foods have more fields like name, description, price, etc this is how i declared the arrays in my .ts file :

  restaurants: any[] =[
    {
      id:1,
      name: 'Restaurant1',
      food:[
        {
          id:1,
          name:'Burger',
          description:'good',
          price:10, 
          photo:'img1.jpg',
        },
        {
          id:2,
          name:'Pizza',
          description:'nice',
          price:20,
          photo:'img2.jpg',
        },
      ]
    },
    {
      id:2,
      name: 'Restaurant2',
      food: [{
        id:3,
        name:'Burger',
        description:'good',
      },
        {
          id:4,
          name:'Ice',
          description:'nice',
        },],
    },
  ] ```

What am I doing wrong? Thank you for your responses!

Answer 1

Use Ion change event which triggered after each change on your select options. Template:

<ion-select [(ngModel)]="chosenRestaurantIdx" (ionChange)='selectionChanged($event)'>
  <ion-option *ngFor="let restaurant of restaurants; let i = index" [value]=i>
    {{ restaurant.name }}
  </ion-option>
</ion-select>

Typscript:

selectionChanged(data:any){
let newSelection = data.detail.value;
// add your code logic here
}

Answer 2

Try with this in template:

<ion-item>
    <ion-label>Restaurant</ion-label>
    <ion-select [(ngModel)]="chosenRestaurantIdx">
      <ion-option *ngFor="let restaurant of restaurants; let i = index" [value]=i>
        {{ restaurant.name }}
      </ion-option>
    </ion-select>
</ion-item>

<ng-container *ngIf="chosenRestaurantIdx != null">
    <ng-container *ngFor="let food of restaurants[chosenRestaurantIdx].food; let i = index">

        <ion-thumbnail slot="start">
            <img [src]="food.photo"/>
        </ion-thumbnail>

        <ion-label>{{ food.name }}</ion-label>
        <ion-button color="primary" (click)="edit(i)">Edit
            <ion-icon slot="start" name="create"></ion-icon>
        </ion-button>
        <ion-button color="dark" (click)="remove(i)">Delete
            <ion-icon slot="start" name="trash"></ion-icon>
        </ion-button>

    </ng-container>        
</ng-container>

And introduce a var to ts:

chosenRestaurantIdx: number = null;

Add methods to ts as placeholders for edit/remove button clicks:

edit(index){
    console.log("edit index:",index);
  }

  remove(index){
    console.log("delete index:",index);
  }

Finally, of course, you'll have to style it all.