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.