Ionic Slides not working properly, after set root (advanced problem)


Hi everyone :slight_smile:

TLDR: If the app runs and I call setRoot to a page with ion-slides, they don’t work. If I restart the app and call the same setRoot, they work.

I have the following problem. While using my app at one point the user will get to a new page / screen (lets call it segmentPage). I do this utilizing setRoot. On this page the user has access to slides and segement buttons. These buttons don’t work in conjucntion, when I call setRoot within the app. When they close the app on said segmentPage , and reopen it, the apps calls it’s reauthenticate method, which puts the user back to the segmentPage. Then the slides work.

For reference, here is the code (abbreviated):

    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
  <ion-toolbar no-border-top class="itemSlides">
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)">
      <ion-segment-button *ngFor="let slide of slides" value="{{}}">

  <ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let slide of slides">
        <my-component *ngFor="let item of myItems" [item]="item"></my-component>



import { Component, ViewChild } from '@angular/core';
import { Content, Events, IonicPage, Slides } from 'ionic-angular';

  selector: 'page-menu',
  templateUrl: 'menu.html',
export class MenuPage {
  @ViewChild('mySlider') slider: Slides;
  @ViewChild(Content) content: Content;
  selectedSegment: string;
  slides: any;
  pageTitle: string = "Segment Page"

  constructor() {

  private initializeSlides(): void {
    this.selectedSegment = SLIDE_ID_1;
    this.slides = [
        id: SLIDE_ID_1,
        title: SLIDE_TITLE_1
        id: SLIDE_ID_2,
        title: SLIDE_TITLE_2
        id: SLIDE_ID_3,
        title: SLIDE_TITLE_3
        id: SLIDE_ID_4,
        title: SLIDE_TITLE_4

  onSegmentChanged(segmentButton) {
    const selectedIndex = this.slides.findIndex((slide) => {
      return === segmentButton.value;

  onSlideChanged(slider) {
    try {
      const currentSlide = this.slides[slider.getActiveIndex()];
      this.selectedSegment =;
    catch (error) {
      //Slided too far, just do nothing in this case as it is not important


Also, here are the functions in app.component.ts that I use to change root (utilizing events):

private enableMenu(menuId: string): void {, menuId);

  private setRootPage(rootPage: string): void {
      let params = { tabIndex: 0};
      this.nav.setRoot(rootPage, params).then(() => {
      console.log("'Tabs' in rootPage");
    } else {

  private setRootAndEnableMenu(rootPage: string, menuId: string): void {

  private startListeningToEvents(): void {,
      (rootPage: string, menuId: string) => {
        this.setRootAndEnableMenu(rootPage, menuId);

Other than that my app.component.ts pretty much looks like the one from the ionic conference app.

Any help would be much appreciated!