Ionic: change ion-list items on click

Question

Lets say I have 3 lists

list: 1 ) bus, plane

list: 2 ) [related to bus] slow, can't fly

list: 3) [related to plane] fast, can fly

In my Ionic Angular project I have successfully made the 1st ion-list. But how can I change the whole ion-list by clicking on the item inside it?

[I get it, its something to do with (click) function, but how I can affect the whole list using typescript]

Answer 1

Edit: I get what you want to achieve. You can do this by creating an intermediary list and using that list in your ngFor . That way you can just simply change the reference of the intermediary list to whatever list you like onClick

export class ListPage {
   transportationTypes: string[] = ['bus', 'plane'];
   busSpecs: string[] = ['slow', "can't fly"];
   planeSpecs: string[] = ['fast', 'can fly'];

   currentList: string[] = this.transportationTypes;

   itemClicked(type): void {
      if (type === 'bus') {
        this.currentList = this.busSpecs;
      } else if(type === 'plane') {
        this.currentList = this.planeSpecs;
      } else {
        this.currentList = this.transportationTypes;
      }
   }
}

And in your HTML just call the itemClicked function

<ion-list *ngIf="currentList">
  <ion-item *ngFor="let item of currentList" (click)="itemClicked(item)">
    {{item}}
  </ion-item>
</ion-list>