I have referred this example from ionic framework documentation and created a segment of my own.
<div padding>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'puppies'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-puppy-1.jpg">
</ion-thumbnail>
<h2>Ruby</h2>
</ion-item>
...
</ion-list>
<ion-list *ngSwitchCase="'kittens'">
<ion-item>
<ion-thumbnail item-start>
<img src="img/thumbnail-kitten-1.jpg">
</ion-thumbnail>
<h2>Luna</h2>
</ion-item>
...
</ion-list>
</div>
Here, they are displaying different ion-list on different button clicks. But I am a different element type to be displayed on two different button clicks. Here is my code-
<div>
<ion-segment [(ngModel)]="pet">
<ion-segment-button value="audios">
Audios
</ion-segment-button>
<ion-segment-button value="images">
Images
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="pet">
//this is coming
<ion-list *ngSwitchCase="'audios'">
<p align="left">
Resources
</p>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<i class="material-icons rotate theme-color" item-start> format_align_center</i>
Lemon Exercise<span item-end>08:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>04:11</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end> 07:12</span>
</ion-item>
<ion-item-divider>
Category Name
</ion-item-divider>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Audio File Name<span item-end>11:00</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Sample Goal Audio<span item-end>10:12</span>
</ion-item>
<ion-item class="custom-font-size">
<ion-icon name="md-play" class="play-icon-color" item-start></ion-icon>
Mindfulness<span item-end>10:12</span>
</ion-item>
</ion-list>
//this is not coming
<ion-grid *ngSwitchCase="'images'">
<div *ngFor="let images of image; let i = index;">
<ion-row *ngIf="i % 3 === 0">
<ion-col col-4 *ngIf="i < images.length">
<img [src]="images[i].url" />
</ion-col>
<ion-col col-4 *ngIf="i+1 < images.length">
<img [src]="images[i+1].url" />
</ion-col>
<ion-col col-4 *ngIf="i+2 < images.length">
<img [src]="images[i+2].url" />
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
in .ts file i have stored images as
this.image = [
{ url: 'assets/imgs/placeholder.png'},
{ url: 'assets/imgs/placeholder.png' },
{ url: 'assets/imgs/placeholder.png' }
];
As you can see i want to display a ion-list on first segment button click and display a image grid on second segment button click. As of now nothing comes up when i click on the second button
I think you're for loop is not correct, You are using the loop and inside it, you are trying to use an index on each item which is not an array. Below code should be working