Issue (possible bug) with Ion-slides

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

1 Like

… Anyone got anything to add here?

If it was me, I’d start by creating a bog-standard Ionic side-menu app, and then add the slider to one of the pages. I’m pretty sure that will work, but you will have an app with a menu on all the page headers, but you can change that.

I doubt the way you’ve designed the menu header is going to work, if you look at the bog standard side menu you’ll see that you don’t need a grid to position the menu toggle, and you need a lot more stuff to get the menu to toggle. e.g. a split-pane

Otherwise, re-think the need for a “menu” and consider using an ion-popover instead…

…haven’t used it on a slider page, so don’t know if it will work, can’t see why not?

Not sure if I explained myself well enough or if you misunderstand me… the menu toggle works fine… that is handled via routing. The issue I have is the slides… not rendering. Ok. I agree that the grid is overkill in the header but I said that in the original post. Are you telling me there is a sample somewhere that shows a better menu toggle? But also, the non-working slides is a bit disconcerting…

I tried what I suggested and both the menu and slider work correctly.

i.e. Create a sidemenu default app, add a slider to one of the pages.

It appears there is a bug in your code?

1 Like

I did that and so found how to simplify the header to:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      {{ userService.images[currentImageIdx].Title }}
    </ion-title>
  </ion-toolbar>
</ion-header>

This works fine, so thank you for that tip, and I needed a tidy way to fix that, as I said, the grid is overkill. I don’t think there is an actual ‘bug’ in my code since there isn’t much of it, morever a possible mangling interaction between angular, ionic and the slides…
Thanks again.