Im Used Ionic-3 and Im hide Tabs bar On Specific pages, Its working fine but i have some issue, some time display this error message
TypeError: Cannot read property 'style' of null
how to fix this issue,
this is my code
check.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
#IonicPage()
#Component({
selector: 'page-check',
templateUrl: 'check.html',
})
export class CheckPage {
tabBarElement: any; // hidetab
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tabBarElement = document.querySelector('.tabbar.show-tabbar');// hidetab
}
ionViewDidLoad() {
console.log('ionViewDidLoad CheckPage');
}
ionViewWillEnter() {
this.tabBarElement.style.display = 'none'; // hidetab
}
ionViewWillLeave() {
this.tabBarElement.style.display = 'flex'; // hidetab
}
takeMeBack() {
this.navCtrl.parent.select(0); // backbutton
}
}
Try this maybe it can fix your issue :
ionViewWillEnter() {
let tabBarElement = document.querySelector('.tabbar.show-tabbar');
if (tabBarElement != null) {
tabBarElement.style.display = 'none'; // or whichever property which you want to access
}
}
Related
I am new to Ionic, I have this problem when trying to pass navParams to other pages. I want to pass the team object from TeamHomePage to TeamDetailPage. but I always got the null. I have check in the ionViewDidLoad, and console it to make sure the team object is assigned, and try to pass a testing object (successfully). Anyone has any idea when is the object of the team went?
<ion-tabs>
<ion-tab tabTitle="Team" [root]='teamDetailTab' [rootParams]='testing' tabIcon="basketball"></ion-tab>
<ion-tab tabTitle="Standings" [root]='standingsTab' [rootParams]='team' tabIcon="podium"></ion-tab>
</ion-tabs>
TeamHomePage.ts
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { TeamDetailPage } from '../team-detail/team-detail';
import { StandingsPage } from '../standings/standings';
#Component({
selector: 'page-team-home',
templateUrl: 'team-home.html',
})
export class TeamHomePage {
public team: any = {}
public teamDetailTab = TeamDetailPage
public standingsTab = StandingsPage
public testing: any = {id:1, content: 'testing'}
constructor(
public navCtrl: NavController,
public navParams: NavParams) {}
ionViewDidLoad() {
this.team = this.navParams.data
console.log('TeamHomePage navParams.data:')
console.log(this.navParams.data)
console.log('TeamHomePage this.team:')
console.log(this.team)
}
goHome() {
this.navCtrl.popToRoot()
}
}
TeamDetailPage.ts
import { Component } from '#angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { EliteApi } from '../../providers/elite-api/elite-api';
import { GamePage } from '../game/game';
import * as _ from 'lodash'
#Component({
selector: 'page-team-detail',
templateUrl: 'team-detail.html',
})
export class TeamDetailPage {
public team: any = {}
public games: any[]
private tourneyData: any
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private eliteApi: EliteApi
) {}
ionViewDidLoad() {
this.team = this.navParams.data
this.tourneyData = this.eliteApi.getCurrentTourney()
this.games = _.chain(this.tourneyData.games)
.filter(g => g.team1Id === this.team.id || g.team2Id === this.team.id)
.map(g => {
let isTeam1 = (g.teamId === this.team.id)
let opponentName = isTeam1 ? g.team2: g.team1
let scoreDisplay = this.getScoreDisplay(isTeam1, g.team1Score, g.team2Score)
return {
gameId: g.id,
opponent: opponentName,
time: Date.parse(g.time),
location: g.location,
locationUrl: g.locationUrl,
scoreDisplay: scoreDisplay,
homeAway: (isTeam1 ? "vs.": "at")
}
})
.value()
console.log('TeamDetail team:')
console.log(this.navParams.data)
console.log('TeamDetail: tourneyData')
console.log(this.tourneyData)
console.log('TeamDetail touerneyData.games:')
console.log(this.tourneyData.games)
}
getScoreDisplay(isTeam1, team1Score, team2Score) {
if (team1Score && team2Score) {
var teamScore = (isTeam1 ? team1Score : team2Score)
var opponentScore = (isTeam1 ? team2Score : team1Score)
var winIndicator = teamScore > opponentScore ? 'W: ' : 'L: '
return winIndicator + teamScore + '-' + opponentScore
}else {
return ''
}
}
Empty Team Object showing in console chrome
I have created a little phone app with Ionic. I am trying to implement a bit logic where the component knows when its online or offline. To do so I am using the network plugin fom Ionic and it just does not work as expected.
instead of updating the
this.connected
value every time when I switch on / off the network, it will only do so if I switch it off / on AND do something like switching from landscape to portrait mode, or work on a different app for a while and come back to the app.
Really puzzled by that.
Here is the code:
import {Component} from '#angular/core';
import {NavController, NavParams, Platform} from 'ionic-angular';
import {GooglePlus} from '#ionic-native/google-plus';
import {SurveyService} from "./survey.service";
import {Survey} from "../../Declarations/Survey";
import {SurveyPage} from "../survey/survey";
import {Network} from "#ionic-native/network";
#Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [SurveyService, Network]
})
export class HomePage {
public surveys: Survey[] = [];
public connected;
public networkType;
constructor(public navCtrl: NavController,
private googlePlus: GooglePlus,
private surveyService: SurveyService,
public navParams: NavParams,
platform: Platform,
private network: Network) {
this.checkForNetwork();
this.surveyService.getAvailable().subscribe(surveys => {
this.checkForNetwork();
this.surveys = surveys;
})
}
login() {
this.googlePlus.login({
'webClientId': '632130231957-dmjd154jhq1eenimedri3m0de6sh7tln.apps.googleusercontent.com'
}).then((res) => {
console.log(res);
}, (err) => {
console.log(err);
});
}
logout() {
this.googlePlus.logout().then(() => {
console.log("logged out");
});
}
openSurvey = (survey: Survey) => {
this.navCtrl.push(SurveyPage, {
survey: survey
});
}
checkForNetwork = () => {
this.networkType= this.network.type;
this.network.onDisconnect().subscribe(() => {
this.connected = false;
this.network.type = null;
});
this.network.onConnect().subscribe(() => {
this.connected = 'network connected!';
setTimeout(() => {
if (this.network.type === 'wifi') {
this.connected = true;
}
}, 3000);
});
}
}
OK, I worked it out:
Turns out that ionic works perfectly fine, but I tried to change the view of my application depending on whether
this.connected
is true or false. I did not realize that I needed to tell Angular to refresh its view by using Application
applicationRef.tick();
in the right place. So basically, once the Ionic changes the value of this.connected you need to tell Angular about it, here is the corrected part of the code:
You need to inject ApplicationRef into the constructor
constructor(public navCtrl: NavController,
...
private appReference: ApplicationRef) {
...
checkForNetwork = () => {
this.networkType= this.network.type;
this.network.onDisconnect().subscribe(() => {
this.connected = false;
this.network.type = null;
this.appReference.tick();
});
this.network.onConnect().subscribe(() => {
this.connected = 'network connected!';
setTimeout(() => {
if (this.network.type === 'wifi') {
this.connected = true;
this.appReference.tick();
}
}, 3000);
});
}
I have a typescript file with this part of code:
export class HomePage {
createprofile = {} as CreateProfile;
profileData: FirebaseObjectObservable<CreateProfile>;
constructor(private afAuth: AngularFireAuth, private toast: ToastController, private afDatabase: AngularFireDatabase, public navCtrl: NavController) {
}
goToYourItemsListPage(){
this.navCtrl.setRoot("YourItemsListPage");
}
ionViewDidLoad() {
this.afAuth.authState.take(1).subscribe(data => {
if(data && data.email && data.uid){
this.profileData = this.afDatabase.object(`create-profile/${data.uid}`);
//console.log(data);
}else{
this.toast.create({
message: `Could not find authentication details!`,
duration: 3000,
position: "bottom"
}).present();
}
});
}
}
And in home.html I am adding this code:
<h1>Welcome, {{(profileData | async)?.firstName}}!</h1>
But it is not displaying error nor any value it's just: "Welcome !"
What am I missing here?
I'm a newbie to ionic.
Thank you
Hi i´m new in ionic and I am trying to pass the scann information form one page to another, the thing its that when I execute the program I have a console.log to check if the info its passed correctly but on chrome console said undefined, letme paste my code:
home.ts where i try to send the info from the scan:
import { Component } from '#angular/core';
import { NavController,Platform } from 'ionic-angular';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { TabsPage } from '../tabs/tabs';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
private barcodeText:String;
private barcodeFormat:String;
private platform:Platform;
private navController:NavController;
constructor(private barcodeScanner: BarcodeScanner,public navCtrl: NavController,platform:Platform) {
this.platform = platform;
this.navController = navCtrl;
}
doScan(){
console.log('scannig product barcode');
this.platform.ready().then(() => {
this.barcodeScanner.scan().then((result) => {
if (!result.cancelled) {
this.barcodeText = result.text;
this.scanningDone(this.barcodeText)
}
}, (error) => {
console.log('error when scanning product barcode');
});
});
}
scanningDone(data){
this.navController.push(TabsPage,{
data:data
});
}
main.ts where the info suppose to go:
import { Component } from '#angular/core';
import { NavController, NavParams , ToastController} from 'ionic-angular';
import { BarcodeScanner } from '#ionic-native/barcode-scanner';
import { DetailsPage } from '../details/details';
import { Http } from '#angular/http'
#Component({
selector: 'main',
templateUrl: 'main.html'
})
export class MainPage {
information: any[];
item:any;
private bcData;
constructor(public navCtrl: NavController, private http: Http,public params:NavParams) {
this.bcData = params.get('data');
console.log(params.get('data'));
let localData = http.get(this.bcData).map(res => res.json().items);
localData.subscribe(data => {
this.information = data;
})
}
on the console.log(params.get('data')); its where I get the undefinied on the console.
you could have a method in your TabsPage that handles opening and closing pages like this:
openPages(Page, Data){
this.navCtrl.push(Page,Data);
}
Then in your scanningDone Method:
scanningDone(data){
this.tabsPage.openPages(MainPage,{
data:data
});
}
How about using localStorage
look at this as well
I am building an app in Ionic2. I want to implement Facebook within the app and so I am trying to use the ionic-native Facebook api. I imported it and then attempted to assign it to a variable so I could use the functions associated with it.
Here is my code.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Facebook } from 'ionic-native';
#Component({
selector: 'page-news-feed',
templateUrl: 'news-feed.html',
})
export class NewsFeed {
fb: any;
constructor(public navCtrl: NavController, facebook: Facebook) {
this.fb = facebook;
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
this.fb.login([]);
ionViewDidLoad() {
console.log('Hello NewsFeed Page');
}
}
I thought an import works much like a class in that you can import it and assign it to a variable and then have access to its methods. Does it not work like that? How does it work?
You just have to import Facebook class like it is said in Ionic native docs :
https://ionicframework.com/docs/v2/native/
You don't need to inject it through the constructor. As method are static this will print an error.
Be sure to also call Facebook after platform.ready event. And don't forget to add the plugin. See your example modified accordingly.
import { Component } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Facebook } from 'ionic-native';
#Component({
selector: 'page-news-feed',
templateUrl: 'news-feed.html',
})
export class NewsFeed {
constructor(public navCtrl: NavController, platform: Platform) {
platform.ready().then(() => {
console.log('Faceboook');
Facebook.login([]).then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});
})
}
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
ionViewDidLoad() {
console.log('Hello NewsFeed Page');
}
}