A post was split to a new topic: virtualScroll with cards? approxItemHeight?
↧
How to lazy load images?
↧
Can't use deeplink router with docs
It's ionic3
I saw deeplink docs on official docs.
I started ionic web with 3 tabs
on tabs, I want to make router function
for example, if I press about-us tab, it goes to /about-us
anyway, I followed docs
and on app.component.ts
I did like this. and added it on app.module.ts 's providers.
import { SettingPage } from './../pages/settings/setting';
import { RedditPage } from './../pages/reddit/reddit';
import { AboutPage } from './../pages/about/about';
import { Deeplinks } from '@ionic-native/deeplinks';
import { RedditService } from './service/reddit.service';
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 { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html',
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private deeplinks: Deeplinks) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.deeplinks.route({
'/about-us':AboutPage,
'/reddit':RedditPage,
'settings':SettingPage
}).subscribe(
(match)=>{
console.log("mated : ",match);
},(nomatch)=>{
console.log(nomatch);
}
)
statusBar.styleDefault();
splashScreen.hide();
});
}
}and what else I should do?
based on angular2...I should do something on tab like [routerLink]='/about-us'
↧
↧
Android build error . What to do?
Got this error while trying to build the app . Does anyone know how to solve this issue .??
FAILURE: Build failed with an exception.
* What went wrong:
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/
3.3/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.
Error: cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
* What went wrong:
Unable to start the daemon process.
This problem might be caused by incorrect configuration of the daemon.
For example, an unrecognized jvm option is used.
Please refer to the user guide chapter on the daemon at https://docs.gradle.org/
3.3/userguide/gradle_daemon.html
Please read the following process output to find out more:
-----------------------
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.↧
Slider zoom is not working in v2 final
Ok. I am not using WKWebView (I couldn't get it to load local images stored by cordova file and did not want to start installing web servers just so I can show an image).
Anyway, here is a video of what I mean:
Try 1) - pinch and zoom kept resetting
Try 2) - pinch and zoom worked and next slide overlays
My modal code:
<ion-content>
<ion-fab top right >
<button ion-fab mini color="secondary" (click)="removeModal()"><ion-icon name="close" ></ion-icon></button>
</ion-fab>
<ion-slides [pager]='true' [zoom]='true'>
<ion-slide *ngFor="let photo of item.photo">
<div class="swiper-zoom-container"><img src={{getFullPath(photo)}} /></div>
</ion-slide>
</ion-slides>
</ion-content>↧
Barcode Scanner Observable and Multiple Scans
I am curious if it is possible for the barcode scanner to return an Observable vs a Promise. Additionally, it is possible for the barcode scanner to do MULTIPLE scans?
↧
↧
Ionic cordova run android: error in opening zip file
thank you very much.You solved this problem
↧
How to increase width of ion-tab in ion-tabs?
No I didn't so I just changed the text size inside tabs and made it lower, if you find ant solution please share.
↧
Navigation after Modal is messed up
I have a page that loads up a modal window for someone to select an option. Then I have the modal.onDidDismiss function setup in the parent page to navigate to the new page depending on what the user selects in the modal window. The problem is, whenever the page is navigated to, the URL becomes all messed up.
Example, my page is loaded in tabs, there are 5 tabs, clicking on any one of the tabs the URL will stay as "http://localhost:8100" no changes what so ever. Then when someone clicks an option in the modal window the URL becomes something like "http://localhost:8100/#/tabs/t0/chat/private-chat" I can't seem to figure out why the URL changes when navigating this way. It doesn't change anywhere else and it is causing problems. Every time I change anything in the code while testing, the page reloads like it should, but it reloads to the new messed up URL and I have to erase the URL and start over. Here is an example of the code I am running that causes this issue...
Chat.ts...
import { Component, NgZone, ViewChild } from '@angular/core';
import { ModalController, IonicPage, NavController, NavParams } from 'ionic-angular';
import { ChatProvider } from '../../providers/chat/chat';
import { DataProvider } from '../../providers/data/data';
import { ChatMessage } from '../../models/chat-message';
import { User } from '@ionic/cloud-angular';
import { ChatModalPage } from '../chat-modal/chat-modal';
import { ChannelChatPage} from '../channel-chat/channel-chat';
/**
* Generated class for the ChatPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-chat',
templateUrl: 'chat.html',
})
export class ChatPage {
@ViewChild('chat') chatter: any;
messages: any;
zone: NgZone;
chatBox: string;
following: any;
followers: any;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public chat: ChatProvider,
public user: User,
public modalCtrl: ModalController,
public data: DataProvider
) {
this.chat.initialize();
this.messages = [];
this.zone = new NgZone({enableLongStackTrace: false});
this.chatBox = '';
this.chat.socketService.subscribe(event => {
if(event.category === 'message') {
this.zone.run(() => {
this.messages.push(event.message);
});
}
});
}
formatMessage(msg: string) {
if(msg) {
let chatMessage: ChatMessage = {
to: 'recipient',
from: this.user.details.username,
message: msg,
channel: 'channel'
};
return chatMessage;
}
return null;
}
send(message) {
let newMsg = this.formatMessage(message);
if(newMsg) {
this.chat.sendMessage(newMsg);
this.messages.push(newMsg);
}
this.chatBox = '';
}
ionViewDidLoad() {
}
startPrivateChat(user_id) {
this.chat.joinPrivateChat(user_id).then(data => {
this.navCtrl.push(ChannelChatPage, {channel: data});
});
}
showMenu(type: string, fab) {
switch(type) {
case 'channels':
this.showChannelsMenu();
break;
case 'private':
this.showPrivateMenu();
break;
case 'start':
this.showNewChatMenu();
break;
default:
this.showChannelsMenu();
break;
}
fab.close();
}
showChannelsMenu() {
this.chat.getChannels().then(data => {
let modal = this.modalCtrl.create(ChatModalPage, {type: 'channels', items: data});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
});
});
}
showPrivateMenu() {
this.chat.getPrivateMessageChannels().then(data => {
let modal = this.modalCtrl.create(ChatModalPage, {type: 'private', items: data});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
})
})
}
showNewChatMenu() {
let followers = this.user.get('followers', []);
let following = this.user.get('following', []);
console.log("Followers: ", followers);
console.log("following: ", following);
this.data.retrieveUsers([followers, following]).then(data => {
let newFollowing = data[0], newFollowers = data[1];
// for(let index in data[0]) {
// newFollowing.push(data[0][index]);
// }
// for(let ind in data[1]) {
// newFollowers.push(data[1][ind]);
// }
let modal = this.modalCtrl.create(ChatModalPage, {type: 'newChat', items: {following: newFollowing, followers: newFollowers}});
modal.present();
modal.onDidDismiss(data => {
if(data) {
console.log("Modal Dismissed. Heres the Data:");
console.log(data);
this.navCtrl.push(data.page, data.pageData);
}
})
})
}
}So, I have the "showMenu" function that is responsible for setting up the options that go to the "ChatModal" page, that way I only have to have one chatmodal and it can just change the options depending on which the user clicks. Each of the functions has a "modal.onDidDismiss" function that just pushes the correct page to "this.navCtrl". Inside the chat modal page is very simple, just a view page with the options. Each of the options has a (click) event that is either "joinChannel" or "joinPrivateChannel" which call the function...
this.viewCtrl.dismiss({page: "SELECTEDPAGEHERE", pageData: {channel: "CHANNEL RECIEVED FROM SERVER"});That way the navigation stays on the correct page and not from the modal page. However, for some reason every time I click an option it changes the URL, which doesn't happen in any other place. I am using "this.navCtrl.push(...)" in many places throughout my app with no problems what so ever. It is just this modal thing, whenever I click an option, it calls dismiss on the modal and passes data back to the chat page, which calls this.navCtrl.push(...); however the URL gets changed to some weird stuff like "http://localhost:8100/#/tabs/t0/chat/channel-chat" Is there any possible way to stop that from happening and leave the URL alone? Thank you.
P.S. If you need to see more of the code and display pages please ask, I will be more than happy to provide them, I was just trying to keep my post from being too long. Thank you.
↧
Barcode Scanner Observable and Multiple Scans
(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)
↧
↧
Geo in ionic
Hello everyone,
I want to display in two , when I press a button .
The goal at the end is to display lists according to geolocation.
But at first I want to be able to display the coordinates simply.
Do you have a simple example for me to start.
Thank you in advance.
Stéphane
PS. with ngcordova if it's better.
↧
[Solved] ng2-nvd3 what is the correct way to include main component?
does anyone have a complete example for adding this to an Ionic 2/3 project?
Thanks
↧
Navigation after Modal is messed up
I wouldn't do any URL creation for a while. It really helps to read the changelogs and milestones of a framework before pushing it in a particular direction. URLs are in a state of flux.
↧
Sqlite query like
HOW I USE THAT QUERY IN IONIC ?
public listaItens(descricao, tipodebusca, pagina, itens_mostrar, loja){
return new Promise((resolve, reject) => {
this.storage = new SQLite();
this.storage.openDatabase({name: "infosysDB.db", location: "default"})
.then(
(data) => {
if(tipodebusca == "descricao"){
let busca = descricao + "%";
this.storage.executeSql("SELECT * FROM itensoffline WHERE descricao LIKE '?%'", [descricao]) <-- THAT QUERY
↧
↧
How to properly re-render a component in Ionic manually
To solve this problem, I used NgZone, provided by the package: @angular/core.
The documentation of NgZone says:
"An injectable service for executing work inside or outside of the Angular zone.
The most common use of this service is to optimize performance when starting a work consisting of one or more asynchronous tasks that don't require UI updates or error handling to be handled by Angular. Such tasks can be kicked off via runOutsideAngular and if needed, these tasks can reenter the Angular zone via run."
So, I understood that when I read a code via Bluetooth Serial , that is an asynchronous task, then it don't changed the view. So to force re-render the screen I used .run, that executes a function on a synchronously way within the Angular Zone.
So my code become:
import { NgZone } from '@angular/core';
import { Events } from 'ionic-angular';
...
constructor(
public events: Events,
private zone: NgZone
) {
this.events.subscribe('updateScreen', () => {
this.zone.run(() => {
console.log('force update the screen');
});
});
}
...
//So after you read, and do anything you want that does not update the view, call the update Screen
this.events.publish('updateScreen');
...So if I'm wrong, or if someone know a better way to do this task, feel free to comment.
↧
Ionic Refresh Current Page
To solve my problem I used this https://forum.ionicframework.com/t/how-to-properly-re-render-a-component-in-ionic-manually/97343?u=hugopetla
↧
InAppBrowser Not Auto Closing
Hello all.
Im developing a login screen using custom IonicAuth and i'm having a very annoying issue.
When the server response is positive the behaviour is as expected: the login promise is fullfilled and the
corresponding function is called.
But when the server return an error the InAppBrowser overlay do not close automatically. It stays there
showing the error message until the user hit the back button to close it. Then the corresponding reject
function is executed.
Worst yet, if i do like it's recommended in the official docs and hide the InAppBrowser it will stop the reject
method from running (if the reponse from server is positive all is ok tho) and then the only thing the user
can do is go back to the previous screen.
I've found people had the same issue in Ionic v1: https://forum.ionicframework.com/t/custom-login-failure-function/59673
But it seems like this will never go away. Is this the intended working behaviour of InAppBrowser?
Does someone know if its possible to fix this? Or if i want to avoid this ugly blank screen will i need to use another API?
↧
Best way to implement list with toggles and sending it back to server
Not a huge fan. I'm skeptical of explicit Promise construction in general, and I think that idea creates overly tight coupling between pages. Say a third page gets involved. It has to be initiated into the web of communication. When you let service providers do all the data handling, adding additional consumers (pages) is trivial and does not introduce any additional code complexity that must be tested and can introduce subtle bugs.
↧
↧
How to properly re-render a component in Ionic manually
This should not be the case, and if it is I would consider it an ionic-native bug. The Observable should be handling all zone stuff for you; you should not need to be dealing with it in app code.
↧
Navigation after Modal is messed up
What do you mean? I am not generating any URLs or anything, just using the built in this.navCtrl.push(...) to navigate throughout the app. I either us nav.setRoot or nav.push/pop to navigate, I don't actually generate or use URLs anywhere in the code. That's why I am so confused as to why when I navigate using nav.push it changes the URL of the page, but only when I do it at the response of a modal window.
↧
Navigation after Modal is messed up
Don' t do anything that depends on URLs in any way until further notice. Read the changelog and you'll see what I mean.
↧