ViewChild, undefined

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…


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';

  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';

  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;

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

      this._settings.getTheme().subscribe(val => this.chosenTheme = val);
      if (this.auth.isAuthenticated()) {
        if('android')) {
        this.userIcon = this.user.details.image; = this.user.details.username;
        this.rootPage = Tabs;
      } else {
        this.rootPage = LoginPage;

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

And here is my app.html

<div [class]="chosenTheme">

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

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.

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

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!

.load is not in use
simple you can use

    console.log('yes view is ready');;