Hi
The method this.content.scrollToBottom(duration); will scroll the content to the bottom automatically.
If I pass a large value as the “duration” , the scrolling will happen slowly. (Which is what I expect)
Is it possible to stop / pause the scrolling halfway through (with a button action) whilst its scrolling?
So basically I’d like to control the scrollToBottom method grammatically.
Thanks
4 posts - 2 participants
Hi everyone,
Very nice that Ionic is now officially released for Vue, great work!
I have implemented tabs. One tab is ‘explore’ and another one is ‘favourites’. When there are no favourites yet, I have created a button that I want to link in such a way that the explore tab is opened. I couldn’t get it to work properly. The ‘explore’ page is opened in the ‘favourites’ tab…
The button
<router-link :to="{ 'name': 'explore'}">explore</router-link>
The tabs
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="explore" href="/explore">
<ion-icon :icon="map" />
<ion-label>Explore</ion-label>
</ion-tab-button>
<ion-tab-button tab="favourites" href="/favourites">
<ion-icon :icon="heart" />
<ion-label>Favs</ion-label>
</ion-tab-button>
<div class="fab-spacer"></div>
<ion-tab-button tab="search" href="/search">
<ion-icon :icon="search" />
<ion-label>Search</ion-label>
</ion-tab-button>
<ion-tab-button tab="profile" href="/profile">
<ion-icon :icon="person" />
<ion-label>Prefs</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
The routes
const routes = [
{
path: '/',
component: Tabs,
children: [
{
path: '',
redirect: 'explore'
},
{
name: 'explore',
path: 'explore',
component: () => import('@/views/Explore.vue'),
},
{
name: 'favourites',
path: 'favourites',
component: () => import('@/views/Favourites.vue'),
},
{
name: 'search',
path: 'search',
component: () => import('@/views/Search.vue')
},
{
name: 'profile',
path: 'profile',
component: () => import('@/views/Profile.vue')
},
]
}
]
Any ideas?
1 post - 1 participant
Hi, I am trying to load openstreetmap mbtiles in ionic from external source but still not working
i have use https://github.com/oscarfonts/mapbox-gl-cordova-offline/blob/master/README.md as a guide
this is my ionic configurations
Ionic:
Ionic CLI : 6.11.0 (C:\Users\charl\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.28
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, cordova-plugin-ionic 5.4.7, (and 18 other plugins)
Utility:
cordova-res : 0.15.1
native-run : 0.3.0
System:
NodeJS : v12.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
Can you please help me ?
Thanks
1 post - 1 participant
When i Use sdk 28 work but I use sdk 29 not work.
When ?
Fail we open video with streaming media and file opener pdf.
How simulator error?
android studio
-> Configure -> Sdk manager install o android 10.0 (q) close modal
-> Configure -> AVD MANGER -> CREATE VIRTUAL -> Pixel 3a XL -> NEXT -> Q -> NEXT -> FINISH
run this code
async openVideo() {
let options: CaptureVideoOptions = {
limit: 1,
duration: 5,
quality: 0
}
await this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
this.video = res[0].fullPath;
}, (err: CaptureError) => {
console.error(err);
});
}
startVideo(video) {
let options: StreamingVideoOptions = {
successCallback: () => { console.log("Success") },
errorCallback: (error) => {
console.log("Video Start Fail")
console.log(error)
},
orientation: 'portrait',
shouldAutoClose: true,
controls: true
}
this.streamingMedia.playVideo(video, options);
}
ionic cordova emulate android.
1 post - 1 participant
I want to be able to load pages using my database.
Usually, when we use the pages they are used as component. But when I get the page name in the database its being treated as a string.
For example, in the app.component page we can see this line:
this.rootPage = FirstPage;
But when I load it using my database like this:
this.rootPage = data[0].value;
It shows an error. How do I load it from the database and still treat it as a component?
Currently, I am doing it in a switch statement. It works but its not clean.
Help is appreciated. Thanks!
2 posts - 2 participants
github project
using template for component, copied V4 code
press menu button top right(in HeaderComponent),
runs method (menu) in HeaderComponent to create/present the modal.
should open dialog (AddressModal)
crashes at res.present()
Uncaught (in promise) Error: framework delegate is missing
at eval (framework-delegate-d1eb6504.js?b457:11)
at step (tslib.es6.js?9ab4:100)
at Object.eval [as next] (tslib.es6.js?9ab4:81)
at eval (tslib.es6.js?9ab4:74)
at new Promise (<anonymous>)
at __awaiter (tslib.es6.js?9ab4:70)
at attachComponent (framework-delegate-d1eb6504.js?b457:2)
at class_1.eval (ion-modal.entry.js?1ad0:390)
at step (tslib.es6.js?9ab4:100)
at Object.eval [as next] (tslib.es6.js?9ab4:81)
seems like I missed something, same worked in V4
this shows similar using create/present approach
2 posts - 2 participants
Hey!
I haven’t been around that long and only started developing mobile applications a few weeks ago. I’m still learning myself with Ionic and need a little help. Hopefully one of you can help me.
I have read that I can integrate with Ionic database solutions. Which databases are suitable? Is there a SQL based database? Of course it would be best if it was open source.
I have read in some not related to Ionic forums that you can manage and monitor databases through a DBaaS provider, like Aiven. Because you wouldn’t need any hardware and store everything in a cloud. Would that actually be possible with such a project? Or would it not be worth it? For which applications do you use DBaaS?
Sorry for the stupid questions, but I am still in the learning phase and not every article on the internet is immediately understandable…
1 post - 1 participant
Hi everyone!
I currently have an app where the ionic and angular version stayed behind over the last 2 years.
(Started in 2018, check bellow to see the packages used) (I tried to fix it once before but wasn’t easy 
)
There are 3 possible pathways to solve the current technical debt:
What do you guys think is the best course of action?
P.S. I want/need to solve this technical debt problem because the client wants to make a similar app based on the current one. That means then I will have 2 apps with old dependencies… 
package.json:
)(probably will spend today too!)(routes weren’t a thing before! etc)
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "^8.2.13",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "^5.16.0",
"@ionic-native/in-app-purchase-2": "^5.16.0",
"@ionic-native/keyboard": "^5.16.0",
"@ionic-native/market": "^5.16.0",
"@ionic-native/native-audio": "^5.16.0",
"@ionic-native/splash-screen": "^5.16.0",
"@ionic-native/status-bar": "^5.16.0",
"@ionic-native/vibration": "^5.16.0",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"cc.fovea.cordova.purchase": "^8.1.1",
"cordova-browser": "5.0.4",
"cordova-ios": "5.0.1",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.0.1",
"cordova-plugin-market": "^1.2.0",
"cordova-plugin-nativeaudio": "^3.0.9",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-vibration": "^3.1.0",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^3.4.0",
"core-js": "^2.6.5",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"xls-to-json": "^2.1.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"@ionic/app-scripts": "^3.2.4",
"cordova-android": "^9.0.0",
"typescript": "~4.0.3"
},
6 posts - 3 participants
I need to building Branded Apps from a single codebase with different names, icons, splash, theme
1 post - 1 participant
Hello,
I need to call a Java script file in Iframe but not able to do that in iOnic 3. Any pointers please?
Thank you
1 post - 1 participant
How to calculate the corner speed and lean angle similar to this application :
using accelerometer and gyroscope
1 post - 1 participant
HI all,
I have a problem with tabs inside a named outlet. The ion-tabs does not recognize the active tab, when it is rendered inside a named outlet.
I have created a stackblitz to illustrate the problem: stackblitz
I rellay have no clue anymore what the problem is. The tabs inside a main router outlet are working fine.
Thanks in advance
greetings,
Julian
1 post - 1 participant
Hi there. I am using ionic 3 and in app purchase 2@4. I use this code to approve
this.store.when('product')
.approved((p: IAPProduct) => {
if (p.id === one_month_membership) {
console.log();
}
else if (p.id === three_months_membership) {
console.log();
}
else if (p.id === six_months_membership) {
console.log();
}
else if (p.id === yearly_membership) {
console.log();
}
this.ref.detectChanges();
return p.verify();
})
.verified((p: IAPProduct) => p.finish());
but i get this error when i try to use .verifed
Property 'verified' does not exist on type 'void'.
any
i really wanna know am i doing something wrong or ionic in app purchase 2@4 doesn’t support .verifed
thanks and best regards.
1 post - 1 participant
how do I retrieve the value of an input field in my template?
I can document.getElementById()
but compile fails as there is no ‘value’
i shouldn’t have to do that anyhow
i put the property in the field {{propname}}
the property did not change when overtyped
or, the compiler doesn’t know
modalController.dismiss({action: 'save', address: propname });
none of the samples show input fields
1 post - 1 participant
i built my app with templates of Ion??? components.
now I need to call a method on the IonSlides component instance… How do I get that object to invoke methods (next/prev slide)
and i’ve done a good job isolating functions into separate components, uh, but…
the component that needs the instance object is 3 children down the tree
ionslides (id=???)
ionslide
local slide component
header component
content component
footer component < ---- this component holds the buttons to push next/prev
in the angular version I created a local variable from the imported ionslides component
export class HomePage {
@ViewChild(Slides) sliderComponent: Slides;
(but didn’t have to pass it down the tree…)
1 post - 1 participant
I have a problem with Chooser (https://ionicframework.com/docs/native/chooser). When selecting, it does nothing and throws me that error.
[DocumentManager] Failed to associate thumbnails for picked URL i
10 posts - 3 participants
I’m using GooglePlus plugin for Google SignIn with Firebase. It works normally on IOS and WEB.
But when i try it on Android -with below code- it always ask for permission. I click allow, popup closes but reopening constantly until i click to cancel:
const gplusUser = await this.googlePlus.login({
webClientId: 'YY8339XXXXXX1-4jj3ge704rqoyyyd95eplxxxcf0e0hh.apps.googleusercontent.com',
offline: true,
scopes: 'https://www.googleapis.com/auth/plus.login',
})
Then i removed scopes and emulator worked as it’s supposed to be:
const gplusUser = await this.googlePlus.login({
webClientId: 'YY8339XXXXXX1-4jj3ge704rqoyyyd95eplxxxcf0e0hh.apps.googleusercontent.com',
offline: true,
})
With this code i created a new relese for android BUT people got 12500 error on real devices. Probably it’s about “OAuth consent screen” settings in Google Developers Console. I changed it but needs approval and Google says it can take 4-6 weeks. 
What are you using for scopes in your working projects? Did you need to set up OAuth consent screen for Android? Or any other idea on this situation? Especially about constantly opening confirm window. 
Btw, i read about Deprecated Scopes like https://www.googleapis.com/auth/plus.login. Google says use profile. When i use profile in scopes, I also got error 12500 with emulator:
1 post - 1 participant
Hey everyone,
I’m building an app with Ionic 5 and Vue (yey!) and I’m having some trouble.
I have 2 tabs. In one tab I’m showing a list of items and you have a floating action button to add new items to that list. I’m storing the items in local storage, and what I want is the list to get refreshed when I add a new one, so it shows the existing + the new one.
To do that, I’m fetching the data onMounted but as explained in the docs, Ionic only mounts the component once, and then you should use ionViewWillEnter lifecycle. The problem is that with the current API, custom ion lifecycle hooks need to be passed as methods, but I’m using the Composition API as suggested by the tutorial, and I can’t access refs nor data from the methods when using it.
How are we supposed to do this? I’m using the default tabs structure you get when creating a new ionic project with the --type=vue flag.
Any help would be appreciated 
A example of the code i’m writing:
setup() {
const router = useRouter();
const entries = ref<Array<Entry>>([]);
function goToNewEntry() {
// The view to add new entries
router.push('/new-entry')
}
async function fetchAllEntries() {
try {
entries.value = await fetchEntries();
} catch (error) {
console.error(error);
}
}
// Only called once
onMounted(fetchAllEntries);
const methods = {
goToNewEntry,
fetchAllEntries,
};
const data = {
entries,
}
const icons = {
add,
}
return {
...icons,
...methods,
...data,
// first I tried adding here the lifecycle method, but it doesn't work
}
},
methods: {
ionViewWillEnter() {
console.log(this); // in the Composition API, this points to the object
// How can I access here the data?
}
}
1 post - 1 participant
I am learning to write unit tests in ionic and am unable to write a test for AlertController. Below attached is the code
async BackupSQL() {
const alert = await this.alertController.create({
cssClass: 'my-custom-class',
header: 'BACKUP',
message: 'Are you sure want to backup data?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
}
}, {
text: 'OK',
handler: (data) => {
this.exportToSQL();
}
}
]
});
await alert.present();
}
please help me to find solutions for handler event in unit test case coverage. Would really appreciate it if someone could help me write test case to cover the alert button actions and present. Thanks in advance
1 post - 1 participant
Hi All ,
i want to print through usb or serial ,but i am not able to discover the port using starPRNT plugin. that giving always empty response , whereas at the same time other apps to print and detect everything. i am not getting how to use serial ,because how we will get vid and PID of device .there is no such method in serial .how the requestPermission() method will ,if we don’t have the device details .
whenever i am trying to requestPermission() method .it’s giving me “No Device Found” error .
please help asap.
Any help will be appreciated.
Regards,
Subodh kumar Rai
1 post - 1 participant