I’m sorry but I do not understand what the acronym ‘OP’ stands for…
“Original Poster”. The person who started the thread.
Thanks. Yes. I’m trying to do what the OP did.
According to the angular2 docs it’s a reasonable thing, it seems:
http://learnangular2.com/viewChild/?
I wonder why it makes no sense.
But regardless, what I’m trying to accomplish is important - get at the tabs and be able to select them from the code at the app level (app class). Something similar to app.getComponent we used to have. Many people have reported this issue, e.g.
and
which claims you only get the navcontroller with the @ViewChild decorator - why only that one?
There are many more reports of this problem… I will post an issue on github if I don’t find an answer here soon. Thanks!
Because I think of pages as independent entities - they don’t have a parent/child relationship in my conception of the framework.
Personally I think this is a design mistake. I would create some sort of event or observable, and have the tab page controller subscribe to it and be responsible for the select call. The app class should not be involved.
Ok, I finally figured it out. This problem is solved for me now.
Getting tabs and side-menu working together (also using @ViewChild) – or… “Why is my @ViewChild(Tabs) property undefined?”
Short answer: If Tabs is only in the code and not in the template, you get undefined in the code. If it’s in the template as well, it works.
Long answer: If you already have a TabsPage component class in its own folder with scss and html and js/ts files, follow this to get it to work with your sidemenu:
- don’t create a
TabsPagethat is set to the root of your app’s main nav as is typically done, you’ll include its code in the app class itself - get rid of the app’s menu nav element from the HTML template - the one that used to be an
<ion-nav>- get rid of that<ion-nav>altogether - replace that
<ion-nav>with your<ion-tabs>template from what used to betabs.htmlif you had a separate folder for that page, cut and paste the template HTML into app.html - copy code from old TabsPage - take what you need (javascript, scss)
- delete the TabsPage folder altogether
The way you can make@ViewChildwork with a sub-component (not leave your property undefined but instead bind the property to the sub-component’s instance) is to include that sub-component in your parent component’s HTML template as well as in the code (javascript/typescript).
Anyhow, you can see an example of @ViewChild working with Tabs by looking at app.html and app.ts here:
https://github.com/tracktunes/ionic-recorder/blob/master/app/
The link you posted doesn’t work. Is there any chance of getting an example of this? I am running a tabs page and getting the undefined error with view child. Thank you so much.
Don’t use ViewChild until ngAfterViewInit().
Sorry, no clue what link you’re talking about.
The link doron posted to the github on how he made viewchild work with tabs. I’m having the same problem where my page is in a tabbed display and @ViewChild is always undefined.
Can you please describe in more detail what you are fundamentally trying to achieve? I think that in general this thread is seeking for a way to do something that is best avoided entirely.
Can you please describe in more detail what you are fundamentally trying to achieve? I think that in general this thread is seeking for a way to do something that is best avoided entirely.
Absolutely. So I have my main app check for authentication via the ionic services auth plugin, then if they are authorized it loads the “TabPage” which is nothing more than just a tab placeholder to have my main app in a tabbed view. Here is the “TabsPage” html…
<ion-tabs>
<ion-tab tabTitle="Home" tabIcon="home" [root]="homeTab"></ion-tab>
<ion-tab tabTitle="Search" tabIcon="search" [root]="searchTab"></ion-tab>
<ion-tab tabTitle="Post" tabIcon="add" [root]="addPostTab"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="cog" [root]="settingsTab"></ion-tab>
<ion-tab tabTitle="Profile" tabIcon="person" [root]="profileTab"></ion-tab>
</ion-tabs>
Very simple layout, just tabs. Then in my AddPost page I am trying to grab a hold of the input in it with “@viewChild”. Here is the html of my “AddPostPage”…
<ion-header>
<ion-navbar>
<ion-title text-center>Add Post</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<img src="{{pathForImage(lastImage)}}" style="width: 100%;" [hidden]="lastImage === null" id="imageSrc">
<h3 [hidden]="lastImage !== null">Please select an image</h3>
<ion-buttons>
<button ion-button icon-left (click)="showOptions()">
<ion-icon name="camera"></ion-icon>
Select Image
</button>
</ion-buttons>
<ion-list>
<ion-item>
<ion-label floating>Title</ion-label>
<ion-input [(ngModel)]="post.title" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Content</ion-label>
<ion-input [(ngModel)]="post.content" type="text"></ion-input>
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<button (click)="save()" color="light" ion-button full>Save</button>
</ion-footer>
Then for my AddPost ts file I am using the “@ViewChild” to try to grab that input. And here is the AddPostPage ts file…
import {Component, ElementRef, ViewChild} from '@angular/core';
import {
IonicPage, NavController, NavParams, Platform,
Loading, ToastController, LoadingController, ActionSheetController
} from 'ionic-angular';
import { User } from '@ionic/cloud-angular';
import { Post } from '../../providers/post';
import { File } from '@ionic-native/file';
import { FileChooser } from '@ionic-native/file-chooser';
import {Transfer, TransferObject} from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';
import { PostModel } from '../../models/PostModel';
import { Data } from '../../providers/data';
import {Tabs} from "../tabs/tabs";
import Cropper from 'cropperjs';
declare var cordova: any;
@IonicPage()
@Component({
selector: 'page-add-post-page',
templateUrl: 'add-post-page.html',
})
export class AddPostPage {
@ViewChild('imageSrc') imageElement: ElementRef;
loading: Loading;
post: PostModel = new PostModel();
activeTab: number = 2;
lastImage: any = null;
load: any;
cropperInstance: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public postService: Post,
public user: User,
public platform: Platform,
public imageUploader: ImageUploader,
public toastCtrl: ToastController,
public dataService: Data,
public loader: LoadingController,
public pushService: PushService,
public actionSheetCtrl: ActionSheetController,
private camera: Camera,
private transfer: Transfer,
private filePath: FilePath,
private file: File,
private fileChooser: FileChooser
) {
}
pathForImage(img) {
return this.imageUploader.pathForImage(img);
}
ionViewDidLoad() {
this.imageUploader.setType('post');
}
showOptions() {
this.presentActionSheet();
// this.imageUploader.getLastImage().subscribe(data => this.lastImage = data);
}
getPicture(sourceType) {
this.imageUploader.takePicture(sourceType).then(data => {
this.cropImage();
// this.lastImage = data;
});
}
cropImage() {
console.log("Cropping image");
console.log(this.imageElement.nativeElement);
this.cropperInstance = new Cropper(this.imageElement.nativeElement, {
aspectRatio: 1/1,
dragMode: 'move',
modal: true,
guides: false,
highlight: false,
background: false,
autoCrop: true,
autoCropArea: 0.9,
responsive: false,
zoomable: true,
movable: false
});
}
presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler: () => {
if(this.platform.is('android') || this.platform.is('ios')) {
this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: false,
correctOrientation: true
}).then(imageData => {
console.log(this.imageElement);
console.log(this);
console.log(imageData);
this.imageElement.nativeElement.src = imageData;
this.cropImage();
})
// this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
} else {
this.fileChooser.open().then(uri => {
this.imageElement.nativeElement.src = uri;
this.cropImage();
// let currentName = uri.substr(uri.lastIndexOf('/') + 1),
// currentPath = uri.substr(0, uri.lastIndexOf('/') + 1),
// name = this.user.details.username + '-' + new Date().getTime() + '.jpg';
// this.copyFileToLocalDir(currentPath, currentName, name);
});
}
}
},
{
text: 'Use Camera',
handler: () => {
this.camera.getPicture({
quality: 100,
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: this.camera.PictureSourceType.CAMERA,
encodingType: this.camera.EncodingType.PNG,
mediaType: this.camera.MediaType.PICTURE,
allowEdit: false,
correctOrientation: true
}).then((imageData) => {
this.imageElement.nativeElement.src = imageData;
this.cropImage();
})
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
copyFileToLocalDir(namePath, currentName, newName) {
return new Promise(resolve => {
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newName).then(success => {
this.lastImage = newName;
resolve(newName);
}, error => {
this.presentToast('Error while storing file.');
console.log(error);
resolve(false);
});
});
}
presentToast(text) {
let toast = this.toastCtrl.create({
message: text,
duration: 3500,
position: 'top'
});
toast.present();
}
cropDone() {
this.lastImage = this.cropperInstance.getCroppedCanvas({width: 500, height: 500}).toDataURL('image/jpeg');
this.imageUploader.setImage(this.lastImage);
}
save() {
this.showLoader('Uploading...');
let toast, targetUsers = this.post.getTargetUsers();
this.post._id = this.post.title.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
this.post.datePublished = new Date().toISOString();
this.post.dateUpdated = new Date().toISOString();
this.post.author = this.user.details.username;
this.post.author_id = this.user.id;
this.post.avatar = this.user.details.image;
this.post.image = this.imageUploader.lastImage;
this.post.tags = this.post.getPostTags();
; this.postService.addPost(this.post.toObject()).then(data => {
if(data) {
this.imageUploader.uploadImage(this.post._id).then(([success, response]) => {
if(success) {
if(targetUsers.length > 0) {
this.pushService.sendPostNotification(targetUsers, this.user.details).then(data => {
this.load.dismissAll();
this.navCtrl.setRoot(Tabs);
});
}
this.load.dismissAll();
this.navCtrl.setRoot(Tabs);
} else {
this.load.dismissAll();
toast = this.toastCtrl.create({
message: "Unable to upload the post image.",
duration: 3500,
position: 'top'
});
toast.present();
}
});
} else {
this.load.dismissAll();
toast = this.toastCtrl.create({
message: "Unable to upload the new post.",
duration: 3500,
position: 'top'
});
toast.present();
}
});
}
showLoader(message) {
this.load = this.loader.create({
content: message
});
this.load.present();
}
}
So, as you can see I am trying to get the img tag in my view page and fill it in after the user crops the image. However, after I select an image, in the dev console in chrome I am getting an error saying that imageElement is undefined. I just want to get that img element so I can dynamically change the image, and because the plugin, the only one I could find for ionic 2, all others were written in ionic 1, needs that to build the display for the cropping functions, but it is always undefined.
The gentleman above was saying that it had something to do with the tabs, and had a link to a version he said was working, but the link doesn’t work, so I was hoping he had an updated link, or at least an example of how he made it work. I can’t figure out how to get my “@ViewChild” to not be undefined.
Thank you so much, I seriously appreciate it. I am still kind of new to ionic and this is my first app I have built, so I am still learning best practices and such.
On a side note, I know I should be using a provider or something else to handle uploading images, and I plan to create one after I get this part figured out. Since I am going to be uploading images on more than just this page.
Your use of a function call in the template to define a source is suspicious. That could be called before the template is fully rendered. Better to set the source to a variable, in the constructor initialize the variable to a dummy value, then in ngAfterViewInit() (or any later hook) set the source variable to the value you want. Maybe there’s a different issue (also), but that’s the first thing I’d change, and then see what happened.
Which function call are you talking about? The cropImage function was a copy/paste from another tutorial/post in these forums. The main problem is, even before that and at every point in the class, including the ionViewDidLoad method, the this.imageElement is always undefined.
That was the first danger point I saw. You don’t control the order in which pathForImage is asynchronously called. But you might have issues in ImageUploader also. It looks as though you cut out code when you pasted here. So it’s hard for me to know for sure where the issues are. But, just as a side point, tutorials are often outdated, so it’s better to rely on deep diving into your own code, instead of trusting something you saw online.
Ah, ok, I will change that to be just src="{{lastImage}}" and just have the main function run the pathForImage prior to setting lastImage. Can you see any reason why my this.imageElement is undefined though? That is what is killing me. I can’t run the image crop until that darn @viewChild works and doesn’t return undefined.
Somehow, somewhere, you’re calling ViewChild before ngAfterViewInit(). I can’t be 100% sure about that, because of incomplete code, but it’s very likely.
Edit: Also use #imageSrc inside the template element you want ViewChild to refer to.
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.
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
ngAfterViewInit(){
console.log('yes view is ready');
this.eventsPage.open();
}