Ionic-framework: [RC5] autoplay property on Slider not working with async data

[yannbf]

Edited: Added better description and edited the title.

Ionic version:
[ ] 1.x
[x] 2.x

I'm submitting a ...
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I recently switched from rc4 to rc5 and I noticed that autoplay is not working. I'm getting the given error:

Runtime Error
    Cannot read property 'hasAttribute' of undefined

TypeError: Cannot read property 'hasAttribute' of undefined
    at autoplay (http://localhost:8100/build/main.js:45371:20)
    at startAutoplay (http://localhost:8100/build/main.js:45409:5)
    at initSwiper (http://localhost:8100/build/main.js:45362:9)
    at Slides._initSlides (http://localhost:8100/build/main.js:44207:102)
    at http://localhost:8100/build/main.js:44227:19

Expected behavior:
The slides should slide automatically

Steps to reproduce:
Just add autoplay="2000" to a <ion-slides> whose children use the async pipe.

Related code:
This is my current slider component configuration

<ion-slides loop="true" autoplay="2300" speed="1000">
     <ion-slide *ngFor="let slide of slides | async">
     </ion-slide>
</ion-slides>

Other information:

Ionic info:

Ionic Framework: 2.0.0-rc.5
Ionic Native: 2.2.11
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.1
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36

[mhartington]

@yannbf I'm not able to replicate this in master or using rc5 stable.

using the following markup

<ion-slides loop="true" autoplay="2300" speed="1000">
  <ion-slide style="background: red; color: white;">
    <h1>Slide 1</h1>
  </ion-slide>

  <ion-slide style="background: white; color: blue;">
    <h1>Slide 2</h1>
  </ion-slide>

  <ion-slide style="background: blue; color: white;">
    <h1>Slide 3</h1>
  </ion-slide>

  <ion-slide style="background: purple; color: white;">
    <h1>Slide 4</h1>
  </ion-slide>

  <ion-slide style="background: aqua; color: black;">
    <h1>Slide 5</h1>
  </ion-slide>

  <ion-slide style="background: goldenrod; color: white;">
    <h1>Slide 6</h1>
  </ion-slide>

</ion-slides>

Everything works fine on my end. Are you sure it's because of autoplay or could it be from your code?

[abrjpyAlmbrand]

if you put your slider in the left menu, the slider is not working at all.

[mhartington]

@abrjpyAlmbrand open a new issue then. This is not the purpose of this issue

[mhartington]

Closing as unable to replicate.

[yannbf]

@mhartington I noticed the problem is in regards to async data.
At first I thought it was just for normal slides, but mine comes from async data.
<ion-slide *ngFor="let slide of slides | async"...>.

It was giving the error Cannot read property 'hasAttribute' of undefined because as the slides use async pipe, there are no instances at the moment the page is rendered.

Could you please reopen the issue?

Thanks.

[mhartington]

Can you provide a more complete demo? A plunker?

[trabdin]

I get the same issue and the same hasAttribute error ever since updating from rc.4 to rc.5 (worked fine before then).

I don't have an async pipe however, but an ngFor that loops through elements that I "http.get" from an API.

[kennywang91]

@mhartington I faced the same issue as @yannbf . I notice when the ion-slide is loaded with async data, an error ( 'Cannot read property 'hasAttribute' of undefined' ) occured on the input properties like autoplay, loop, etc. When i removed the input properties from ion-slide, it works normal.

<ion-slides [autoplay]="4000" [loop]="true"> <ion-slide *ngFor="let data of slideData"> <img src="{{data.imgPath}}" onerror="src='assets/img/error-image.png'"> </ion-slide> </ion-slides>

Please help solve this issue. Thanks.

[yannbf]

@mhartington I created another issue with better explanation and a plunkr about another problem with slides but that also affects autoplay: #10064

[chriswheatonshoutz]

I found that if you add a *ngIf="" checking the length of the slide data source it will work with autoplay and the other attributes that cause it to fail. My slides are loaded asynchronously. This is just a workaround until the core issue with the slider are remedied.

<ion-col width-50 *ngIf="slides.length > 1">
    <ion-slides #frSlider initialSlide="0" autoplay="7500" loop="true" pager="true" >
        <ion-slide *ngFor="let s of slides">
            <img [src]="s.slide.$value" />
        </ion-slide>
    </ion-slides>
</ion-col>

[leongzw]

It's not only about the input properties. It's really all about the async data get from server. When the code below is first time constructed, the ionScroll event will not being fired at all, this is probably the ion-content is corrupted due to the async data, however after u navigated to the new page and then pop it away, the ionScroll event will be captured.

<ion-slides>
        <ion-slide *ngFor="let s of slides">
             <ion-content (ionScroll)="onScroll($event)">
                    <img [src]="s.slide.$value" (click)="pushNewPage()"/>
            </ion-content>
        </ion-slide>
</ion-slides>

[eakkew]

for my work around, I set the autoplay in page instead.:

in mypage.html

    <ion-slides #mySlider initialSlide="0" autoplay="7500" loop="true" pager="true" >
        <ion-slide *ngFor="let s of slides">
            <img [src]="s.img_url" />
        </ion-slide>
    </ion-slides>

in mypage.ts

    this.myData.getData(params).subscribe(data => {
      this.slides = data;

      this.mySlider.update();
      setTimeout(() => {
        this.mySlider.autoplay = 2500;
        this.mySlider.startAutoplay();
      }, 500); // need to wait at least 300ms for sliders.update
    });

[filippodicostanzo]

I have the same issue,
i load the data from json file and the code return this error

Cannot set property 'autoplay' of undefined

until rc0.4 it works

please resolve this issue

[rafikhdj]

Hello,
Sorry for my English ,
I found a solution, I know it is not the best but good ...

<ion-slide *ngFor="let event of events" >
  <img src="{{event?.picture}}" />
</ion-slide >

this code works for me , i hope for you too

[redefinered]

@rafikhdj you da man!

[ravisojitra]

This is what i do to autoplay slider with async data.

ionViewDidEnter() {
  ...... //you get slider data from any web service
  this.sliderObservable = Observable.interval(3000).subscribe(x => {
        this.autoPlaySlider();
   });
}
autoPlaySlider(){
    var slider_index = this.slides.getActiveIndex();
    if(slider_index < this.sliderData.length){
        this.slides.slideTo(slider_index+1);
    }
    else{
        this.slides.slideTo(0);
    }
  }
ionViewDidLeave(){
    this.sliderObservable.unsubscribe();
}

[ejulfaey]

I used this

.......

[santiagobernalbetancourt]

Hi, how did I solve the problem?

you help me please

[leonardocoutinho]

Please help i have the same problem.
The slide dont autoplay from async.

Any Help

[ravisojitra]

@leonardocoutinho Try my solution. It will work.

[leonardocoutinho]

@ravisojitra dont appear errors, but my slides are blank, i cant see the swipe effects

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.