I am using Ionic 4 with Angular 8. I have an image gallery which works fine when described like this:
<ion-header>
<ion-toolbar>
<ion-title>{{ userService.images[currentImageIdx].Title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-slides #photoslider [options]="sliderOptions" (ionSlideDidChange)="checkKeyandFixText()">
<ion-slide *ngFor="let i of userService.images">
<ion-img cache="false" width="50%" *ngIf="userService.azurekey.Key"
[src]="i.ImageUrl + userService.azurekey.Key"></ion-img>
</ion-slide>
</ion-slides>
... more stuff
</ion-content>
but I want to put a menu toggle in the top left corner and the best way I found to do this was using a grid in the header section like this:
<ion-header>
<ion-grid no-padding>
<ion-row>
<ion-col size="1" no-padding>
<ion-menu-button no-padding>
<ion-icon name="menu" no-padding></ion-icon>
</ion-menu-button>
</ion-col>
<ion-col size="11">
<ion-toolbar>
<ion-title>{{ userService.images[currentImageIdx].Title }}</ion-title>
</ion-toolbar>
</ion-col>
</ion-row>
</ion-grid>
</ion-header>
This stops the ion-slides element from rendering at all. The object is still there. I have two issues really:
1: Is there a bug in ion-slides or am I just using it incorrectly?
2: Is there a simpler way of making my header section with its menu toggle, because it does seem a bit overkill and doesnt work/shows up bug anywayā¦
There is a more detailed explanation of this with pictures etc on this stack-overflow post:
https://stackoverflow.com/questions/58120791/ion-slides-not-appearing-when-following-ion-header-with-grid
Thanks in advance,
Brett