ViewChild access variable 'cannot read property'

Ionic Framework ionic-v3
1

Heeey everyone!
I’m testing a component from: https://www.joshmorony.com/how-to-create-a-sliding-drawer-component-for-ionic-2/

I want to apply it to my configuration, that’s why I have to use @ViewChild.

This is my parent file:

import { Component, Input, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Platform, DomController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';

@Component({
  selector: 'content-drawer',
  templateUrl: 'content-drawer.html'
})
export class ContentDrawer {

  @Input('options') options: any;
  @ViewChild('HomePage') homePage: HomePage;

  handleHeight: number = 50;
  bounceBack: boolean = true;
  thresholdTop: number = 200;
  thresholdBottom: number = 200;

  constructor(public element: ElementRef, public renderer: Renderer, public domCtrl: DomController, public platform: Platform) {

  }

  ngAfterViewInit() {
    console.log(this.homePage.stateFilter);
     ..........
  }
}

and my child file:

import { Component } from '@angular/core';
....
import { Http } from '@angular/http';

@IonicPage({
  name: 'HomePage'
})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  ......
  stateFilter: any = 'noFilterModal';
  statePoi: any = 'noPoiModal';
  ......
}

…but I got this error:

Error: Uncaught (in promise): TypeError: Cannot read property 'stateFilter' of undefined

…and I dont understand because I’m using ViewChild :confused:

2

I don’t understand. Are you in Ionic 1 or not?

3

I would guess ngAfterViewInit() is too early. I would try an Ionic-specific lifecycle event like ionViewDidLoad() or ionViewWillEnter().

4

@AaronSterling, sorry I’m talking about Ionic 2/3 :slight_smile:

@rapropos, thanks for your answer, but it’s not working.
It’s like it can’t access to stateFilter whereas it knows it :confused:

5

I don’t read it that way. I read it as that homePage is not defined at the time you try to reference it.

1 Like
6

It’s strange.
As you can see homePage is defined before constructor…have you got a better idear ?

7

The order that things appear in a file is irrelevant. Did you actually try my earlier advice?

8

Yes, but both are not working
Maybe, it’s because of my parent file is a component and my child file a page? :confused:

9

You’re trying to inject a page into a component? That makes absolutely no sense to me.

1 Like
10

Is that what the tutorial recommended?

1 Like
11

Ohoh I love you @rapropos. I was focus on my goal and I forgot simple logic of Angular.
@AaronSterling, no, I’m adaptating this tutorial to my project and I do bad things ahah

Ok. So I’ve got a last question. My HomePage started to be a little big (320 lines), is it necessary to have a small file page?