bug: Bullets not being created

[ceciliassis]

Type: bug

Ionic Version: 2.x

Platform: mobile webview

-- Description I have two slides at a page, each for one orientation. When I start the app at "portraid" the pager bullets for the "landscape" are not created, e.g, not created at the DOM at all, and vice-versa.

I've noticed the not creation debugging the code and application.

I'm hiding the elements instead of using ngIf, and the values used come from a json file.

-- Reproduce I believe that if the following code is used, you guys may be able to reproduce it.

-- Code He goes the code: game.component.ts

export class GamePage {

  @ViewChild('landscapeSlider')   landscapeSlider: Slides;
  @ViewChild('portraidSlider')    portraidSlider:  Slides;
  @ViewChild(GameHeaderComponent) header:          GameHeaderComponent;

  lastImageClicked: GameImageComponent;
  lastSlideIndex:   number;
  isLandscape:      boolean;
  roulette:         Roulette;
  options:          Option[];
  theme:            string;
  timer:            number;

  col1   = [];
  col2   = [];
  videos = [];

  constructor( private navCtrl:           NavController,
               private navParams:         NavParams,
               private renderer:          Renderer2,
               private alertCtrl:         AlertController,
               private menuCtrl:          MenuController,
               private platform:          Platform,
               private screenOrientation: ScreenOrientation ) {

    this.isLandscape    = screenOrientation.type.split('-')[0] == 'landscape';
    this.timer          = 300000; //NOTE: mude segundo a necessidade

    this.roulette = this.navParams.get('roulette');
    this.theme    = this.navParams.get('theme');

    this.raffleOptions();    
    this.setupOrientationListener();
  }

  private raffleOptions() {
    this.options = this.roulette.sortOptions();
    this.videos  = this.roulette.getVideosSorted();
    this.col1    = this.videos.slice(0,2);
    this.col2    = this.videos.slice(2,4);
  }

  private setupOrientationListener() {
    this.screenOrientation.onChange()
                          .subscribe(
                            () => {
                              this.isLandscape = 
                                this.screenOrientation.type.split('-')[0] 
                                        == 'landscape';
                            }
                          );

  }

}

game.component.html

<ion-content padding>

  <ion-grid 
    [hidden]="isLandscape"
    class="portraid"
  >
    <ion-row align-items-center>
      <ion-col col-2>
        <ion-icon class="left-icon"
                  name="ios-arrow-back"
                  (click)="previousWordSlider()">
        </ion-icon>
      </ion-col>
      <ion-col col-8>
         <div class="portraid slides-wrapper">   
          <ion-slides 
            pager
            #portraidSlider
            (ionSlideDidChange)="portraidSlideChanged()"
          >
            <ion-slide *ngFor="let word of options">
              {{word.name}}
            </ion-slide>
          </ion-slides>
         </div> 
      </ion-col>
      <ion-col col-2>
        <ion-icon name="ios-arrow-forward"
                  (click)="nextWordSlider()">
        </ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- - - - - - - - - - - - - - - - LANDSCAPE - - - - - - - - - - - - - - - - - - -->

  <ion-grid 
    [hidden]="!isLandscape" 
    class="landscape"
  >
    <ion-row align-items-center>
      <ion-col col-3>
        <ion-icon class="left-icon"
                  name="ios-arrow-back"
                  (click)="previousWordSlider()"
        >
        </ion-icon>
      </ion-col>
      <ion-col col-6>
         <div class="landscape slides-wrapper">   
          <ion-slides 
            pager
            #landscapeSlider 
            (ionSlideDidChange)="landscapeSlideChanged()"            
          >
            <ion-slide *ngFor="let word of options">
              {{word.name}}
            </ion-slide>
          </ion-slides>
         </div> 
      </ion-col>
      <ion-col col-3>
        <ion-icon name="ios-arrow-forward"
                  (click)="nextWordSlider()">
        </ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

game.component.scss

 [hidden]{
    display: none !important;
  }
```</span>

<span is-issue-template></span>

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

Out of context code is always problematic to try and get running because of various dependencies. For this one, my suggestion is to just start with the blank template and do the minimal work required to show the issue you are having, then push it to GitHub and link it here.

Thanks for using Ionic!

[ceciliassis]

Sure thing! https://github.com/ceciliassis/ionic-slider-error-sample I had to use a previous blank project, because the cli just couldn't install the cordova plugin.

[kensodemann]

Had to make a minor tweak to the sample in order to duplicate:

home.html

<ion-content padding>
  <ion-slides pager hideWhen="landscape">
    <ion-slide *ngFor="let option of options">
      {{option}}
    </ion-slide>
  </ion-slides>

  <ion-slides pager hideWhen="portrait">
    <ion-slide *ngFor="let color of colors">
      {{color}}
    </ion-slide>
  </ion-slides>
</ion-content>

home.ts

export class HomePage {
  isLandscape: boolean;
  options: any[];
  colors    : any[];
  constructor(public navCtrl: NavController) {
    this.isLandscape = true;
    this.options = ['family', 'food', 'happy', 'sad', 'blood', 'bad', 'joy', 'jump'];
    this.colors     = ['orange', 'black', 'purple', 'red', 'blue'];
  }
}

This allowed me to see a difference between the two and to show that the bullets do not appear on the switch.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!