ViewChild, undefined

Ionic Framework ionic-v3
21

I don’t think I understand, “@ViewChild” is supposed to be called in the class, but not in a function correct? Sorry, I am still new to ionic, but should I have the viewchild call inside a function in the addPostPage? Like this…

AddViewPage.ts…

constructor() { }

ngAfterViewInit() {
  @ViewChild('imageSrc') imageElement: ElementRef;
}
...

The code I posted up is the entire AddPostPage ts file, and the views are copy/paste from my code base. The only thing I didn’t post up was my data provider, and the app.ts, but the files posted are complete. Just in case here is the Tabs.ts file…

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AddPostPage } from '../add-post-page/add-post-page';
import {Settings} from '../settings/settings';
import { ProfilePage } from '../profile-page/profile-page';
import {SearchPage} from '../search-page/search-page';


@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class Tabs {

  homeTab: any;
  addPostTab: any;
  settingsTab: any;
  profileTab: any;
  searchTab: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.homeTab = HomePage;
    this.addPostTab = AddPostPage;
    this.settingsTab = Settings;
    this.profileTab = ProfilePage;
    this.searchTab = SearchPage;
  }

  ionViewDidLoad() {
  }

}

And my app.component.ts file…

import {Component} from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login-page/login-page';
import { LoadingController } from 'ionic-angular';
import { Auth, User} from '@ionic/cloud-angular';
import { Tabs } from '../pages/tabs/tabs';

import { SettingsService } from '../providers/settings-service';
import {PushService} from '../providers/push-service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;
  loader: any;
  pages: Array<{title: string, component: any, icon: string}>;
  name: string = '';
  userIcon: string = '';
  email: string = '';
  chosenTheme: String;
  toastMessage: any;

  constructor(
      platform: Platform,
      statusBar: StatusBar,
      splashScreen: SplashScreen,
      public loadingCtrl: LoadingController,
      public auth: Auth,
      public user: User,
      private _settings: SettingsService,
      public pushService: PushService
  ) {
    this.presentLoading();
    this.chosenTheme = 'dark';

      this._settings.getTheme().subscribe(val => this.chosenTheme = val);
      if (this.auth.isAuthenticated()) {
        if(platform.is('android')) {
          this.pushService.init();
        }
        this.user.load();
        this.userIcon = this.user.details.image;
        this.name = this.user.details.username;
        this.rootPage = Tabs;
      } else {
        this.rootPage = LoginPage;
      }
      this.loader.dismiss();
  }


  presentLoading() {
   this.loader = this.loadingCtrl.create({
      content: "Authorizing..."
    });
   this.loader.present();
  }
}

And here is my app.html

<div [class]="chosenTheme">

  <ion-nav [root]="rootPage" #content class="theme-dark" swipeBackEnabled="false"></ion-nav>
</div>

Not sure what other code you need, but I will be glad to post literally my entire application if it will help find out why this darn @ViewChild is undefined. Thank you.

22

See my edit. Try that, and post if the problem persists.

24

Absolutely worked perfectly. I was thinking about this wrong. I was thinking that using “#imageSrc” should output “id=‘imageSrc’” into the final view, then the crop plugin would find that and use it. Kind of like jQuery or something similar. Adding the “#imageSrc” worked perfectly, even though it doesn’t put the “id=‘imageSrc’” on the final html.
Thank you so much!

25

.load is not in use
simple you can use

ngAfterViewInit(){
    console.log('yes view is ready');
    this.eventsPage.open();
  }