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>