this.slides.length() Cannot read property 'length' of undefined

Question

console.log(this.slides.length()); prints Cannot read property 'length' of undefined. On setTimeout of 100, this prints.

Is there any method to identify a child component is fully loaded from the parent component?

<ion-content padding class="ttct-app-content">
    <ion-slides>
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
</ion-content>

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

@Component({
  selector: 'page-compose',
  templateUrl: 'compose.html',
})
export class Compose {
  @ViewChild(Slides) slides: Slides;

  constructor(public navCtrl: NavController) {
  }

  ngAfterViewInit(){
    console.log(this.slides.length()); //Cannot read property 'length' of undefined
    //works
    /*
    setTimeout(()=>{    
      console.log(this.slides.length());
    },100); 
    */

  }

}

@BogdanC: yes I tried all the hooks in this article https://angular.io/guide/lifecycle-hooks#!#spy — MELWIN VINCENT, Aug 03 '17 at 16:08
Please add the ionic version you are using so that I could test it. — BogdanC, Aug 03 '17 at 16:18
I'm using the latest version, and I get the same problem. I noticed that all methods are available, but exclusively length() returns an error. setTimeout does not work at all cases — mluke, Aug 30 '17 at 21:11
@MELWINVINCENT For my problem, I decided to use ionViewDidLoad and a setInterval loop checking for this.slides._slides to be ready. Once it's ready, I clear the interval and use the method. I know it's not the best solution but it's been working for me. — mluke, Aug 30 '17 at 21:37
@LucasMedina definitely is not the best approach. This should be fixed by Ionic team — Dani, Oct 21 '17 at 11:23
@DanielRodriguez I definitely agree. Since I don't really understand the architecture behind how Ionic works, and I was pretty fresh to Angular 4, I couldn't come up with any other solution for my previous case :( I hope they can fix it, or at the very least, write a documentation for it. — mluke, Dec 26 '17 at 20:20

score 2 · Answer 1 · answered Oct 21 '17 at 11:30

2

Try this (you don't need to import anything else):

ionViewDidEnter() {
    console.log(this.slides.length());
}

Tried also with a slider loaded using a ngFor and worked like a charm

answered Oct 21 '17 at 11:30

Dani

3,128
2
43
91

score 0 · Answer 2 · answered Aug 03 '17 at 15:42

0

Try throwing that console log in a:

ionViewDidLoad() { 

}

Rather then ngAfterViewInit().

answered Aug 03 '17 at 15:42

Pezetter

2,783
2
22
40

score 0 · Answer 3 · answered Aug 03 '17 at 18:14

0

How about raising an event from child's onInit and watching it in parent? https://angular.io/guide/component-interaction#parent-listens-for-child-event

answered Aug 03 '17 at 18:14

Rohit Ramname

824
2
9
24

score 0 · Answer 4 · answered Aug 03 '17 at 20:51

Looks like this is happening because the <ion-slide></ion-slide> children are not initialized on the page hooks. That's why when you put setTimeout() works, because until then they get initialized and added to the <ion-slides> parent. After the hooks they are there, you can check with a button click to read the length() property. You can find a work around here.

score 0 · Answer 5 · answered Nov 26 '18 at 10:25

0

Try to create this method to access to lenght

 get slides_length() {
    if (this.slides && this.slides._slides) {
        return this.slides._slides.length;
    }

    return 0;
}

answered Nov 26 '18 at 10:25

V. Pivet

1,320
3
25
57

this.slides.length() Cannot read property 'length' of undefined

5 Answers5