Ionic framework Multiple ionic Badges On Tabs Not Working

I am trying to add badges to my tabs in ionic, having one badge works fine using the following code: <nav class="tabs tabs-icon-bottom tabs-positive"> <a class="tab-item" ng-click="showVenue('venue')"><i class="icon ion-waterdrop"></i>Venue</a> <a class="tab-item" ng-click="showComments()"><i class="icon ion-ios-chatbubble"></i>Comments</a> <a class="tab-item" ng-click="showEvents()"><span class="badge badge-assertive"

Ionic framework Ionic Facebook Plugin Error

I am trying to add the Facebook plugin ( to my existing Ionic app, but I cannot get it to work. I am currently getting the following when I include the plugin script: Can't find variable: require Here's the script in my markup: <script src="cordova.js"></script> <script src=""></script> If I throw in a reference to requirejs

Ionic framework Resume Firebase from localStorage

I'm using Firebase+Ionic(AngularFire) to create a mobile iOs/Android app, and it works great. The only problem with using Firebase is that all the content in the app is being downloaded anew every time the user starts. In an ideal world the app would save the Firebase-content to localStorage, and the next time the user starts the app, it would load from localStorage - and then simply "update" with Firebase to fetch the latest changes. In other words we would load data locally and "resume" ou

Ionic framework Cloudinary - Upload preset must be in whitelist for unsigned uploads

I want to upload image, to Cloudinary, taken directly from camera in Ionic using cordova camera plugin. I am getting an error of code 1, having message "upload preset must be in whitelist for unsigned uploads." How to solve this error.Please help. my edited js code is: $scope.cameraopen = function(){ var options = { quality : 100, destinationType : Camera.DestinationType.FILE_URI,//FILE_URI sourceType : Camera.PictureSourceType.CAMERA, allowEdit : fal

Ionic framework Ionic integrating Survey Monkey

Am working on an app for surveys using survey Monkey, I wanted to know what experience have you had if you have used survey Monkey for Ionic. Okay this is the solution that i need to work out. I need to create two surveys. One is weekly and other monthly. If the user hasn't participated in weekly survey, they can't participate in monthly survey, and also the weekly has to persist till its answered. Any Ideas out here! Thanks in Advance.

Ionic framework ionic2: ion-toggle not toggling

I have this ionic2 modal content: <ion-toolbar class="android-attr" primary> <ion-title> Search Settings </ion-title> <ion-buttons start> <button (click)="dismiss()"> <span primary showWhen="ios">Cancel</span> <ion-icon name='close' showWhen="android"></ion-icon> </button> </ion-buttons> </ion-toolbar> <ion-content class="has-header"> <ion-list> <ion-item> <h2

Ionic framework Firebase.once not running callback when page isn't first loaded

I have a view on my Ionic app that simply displays a select dropdown menu, and then prompts the user to type in a number. The number is then saved to that specific user's object in the miles object, the key being the selected option and the value being the number typed in. Here is the code for the controller and view. Controller: // Get who is logged in $scope.user = facebook.get(); // Array of airlines var airRef = ref.child("airlines"); $scope.airlines = $firebaseArray(airRef); console.log($

Ionic framework How to extract and reuse nav bar template and logic in Ionic 2 app?

Having had some experience with Angular 1.x (but not Ionic 1.x), I am now trying to develop a small mobile app using Ionic 2, which is based on Angular 2. I am familiar with URL-based routing principles such as those used in ui-router. The concept in Ionic 2 is different and is based on pushing/popping pages on top of a root page. So far I have managed to create 2 pages (Search and Person) with a nav bar on top, and to navigate from one to the other, and back. The navbar has a button to return

Ionic framework How do I structure a multiuser pouchdb/coucdb app and authentication

I've read about 10 related stackoverflow questions on this topic that are all scattered around a similar question... I want to simplify my question around a fictional "todo" application. I'm learning to code (javascript) and I'm hitting a roadblock. My "passion" project to keep me learning is pretty complex and solves a personal travel problem. One day I hope I can give back! Here is the fictional app: This app will be built using Ionic 2. The offline first app will let users log in and create

Ionic framework Remove ion item divider

How I can remove <ion-item> divider? I have the following code to show 4 items in a row: <ion-row ion-list> <ion-col width-25 *ngFor="let player of players"> <ion-item color="dark"> <ion-avatar item-left> <img [src]="photo" class="img img-circle"/> </ion-avatar> {{}} </ion-item> </ion-col> </ion-ro

Ionic framework Can't install or run Ionic after accidentally reinstalling it

I had ionic installed and running properly. Accidentally I installed beta version npm install ionic@beta I did that without having CMD run with administrator, after that ionic command wasn't being recognized anymore, so I tried installing ionic again, but no luck, I tried uninstalling it and then installing it again but also no luck, the error I get when I install it: npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Program Files (x86)\\nodejs\\node.exe" "C:\\Users\\{user}\\AppData\\Roami

Ionic framework Ionic Deep Links route url

What should be the specified route if my url is I use a $cordovaDeepLinks.route('avpi.p1.suite.applink') It does not work . Can anyone please correct the route ?

Ionic framework Ionic, how to set android:largeHeap="true"

how to set android:largeHeap="true" in Ionic project? I'm using Ionic v.1.2.4 [Edited] Is there any way to set without modifying the manifest file directly, setting in Ionic layer? Because the manifest file is generated by Ionic build, so I don't want to touch that autogenerated file directly.

Ionic framework Gulp `serve:before` tasks not running in Ionic CLI v 3

Gulp serve:before tasks are not running in the Ionic CLI v3. They used to run well in Ionic CLI 2 and Ionic CLI 1. gulp.task('serve:before', ['watch']); This is the task. My app uses Ionic 1 and I did the necessary configurations and it is running well on Ionic CLI 3 upon ionic serve but not the gulp task serve:before is not running.

Ionic framework ionic use video.js throws error

I try to use video.js as my video player, but reaches error: Uncaught (in promise): Error: Cannot find module "safe-json-parse/tuple" Error: Cannot find module "safe-json-parse/tuple" Steps I did: npm install -S video.js import videojs from 'video.js'; write code in palyer.ts => videojs('my-player', { controls: true}); above error appears when player page is hit. Anybody has any idea? Or what other 3rd party html5 video player can be easily plugged in? environment details: ionic in

Ionic framework How to hide one of loggedInPages item in ionic-conference-app?

I need to hide one of loggedInPages items in Ionic Conference App For example I have an admin Page. When user logged in application, user can see admin page link in loggedInPages if user's role is admin . loggedInPages: PageInterface[] = [ { title: 'Account', name: 'AccountPage', component: AccountPage, icon: 'person' }, { title: 'Support', name: 'SupportPage', component: SupportPage, icon: 'help' }, { title: 'Logout', name: 'TabsPage', component: TabsPage, icon: 'log-out', logsO

Ionic framework Ionic default back navigation is not working in all the pages - ionic 3

I am working on an ionic project that has several pages out of which some pages have the back arrow that takes to the previous page however this does not seems to work fine on the rest of pages. I believe that the back arrow is default as i have implemented same header code for both the pages but one of them has the back arrow displayed but another does not has. Page 1 header code // This has the back arrow <ion-header> <ion-navbar color="primary" primary> <ion-title>P

Ionic framework How to set attribute into NavParams for update url path in Ionic?

For example, show the value of the radio buttons selected in the URL. URL: [domain]/selector/:value @IonicPage({ name: 'selector', section: 'selector/:value' }) @Component({ template: ` <ion-list radio-group [(ngModel)]="selector"> <ion-item> <ion-label>First</ion-label> <ion-radio value="first" checked></ion-radio> </ion-item> <ion-item> <ion-label>Second</ion-label> <ion-radio value="second"></io

Ionic framework ionic2: Uploading source images to prepare for transformations failed?

I'm using ionic2, I want to set custom splash image so I set splash.png in ../myproject/resources/splash.png and then i run this command: ionic cordova resources --splash but I got this error: Error: socket hang up at TLSSocket.onHangUp (_tls_wrap.js:1140:19) at Object.onceWrapper (events.js:314:30) at emitNone (events.js:110:20) at TLSSocket.emit (events.js:207:7) at endReadableNT (_stream_readable.js:1059:12) at _combinedTickCallback (internal/process/next_tick.js:138:11) at process._tickCal

Ionic framework can Nativescript run at browser?

I was working with Ionic but decided to move to Nativescript for not webView , but is there any way to work with browser as the ionic do (ionic serve ) for developing its much faster without running on android or emulator.Also, I heard some news that ionic tries to move that webView to phones engine as nativescript does, is that true ?

Ionic framework How to restore the root page for a tab?

I'm new to Ionic 3, and what I want to do it's to get the specified scenario: I go to Tab 1, click on some Item in Tab 1 and go to a view of this item, If I now switch to Tab 2, when I go to Tab 1, the view showed should be the Tab 1 view, not the Item View for a Tab 1 element. In ionic 1 I previously have used $ionicHistory.clearHistory() but seems now it's not available. I've tried several uses of NavController but seems I am not using it properly or where it means to be used. How can I acco

Ionic framework Allow IONIC DevApp through the firewall

I am able to connect to IONIC DEVAPP via my personal computer but unable to connect it when hosted on the office laptop even on my home wifi network. I can see my app on both office and personal laptop. $ionic serve -c I am able to access the Devapp hosted URL via my browser But, from my Android device, on my office laptop it gives the following error net::ERR:CONNECTION_TIMED_OUT( It seems more like a Fi

Ionic framework IONIC 3 Google Maps Native plugin background color white

I'm using the IONIC Google Maps native plugin and followed this tutorial: So it works, but, I have a white background color. According to the tutorial there is a css fix : ion-app .nav-decor{ background-color: transparent !important; } But this doesn't work. Does anybody have this same issue?

Ionic framework How to sort Unique JSON Object form JSON array in ionic 2

I am a beginner in Ionic 2. I have successfully fetch data from URL into an array.In my json response, there are multiple duplicate JSON Object. I required to sort this json object and need to display in accordion-list This is my json response: { "result": [ { "ws_type": "Speed Boat", "ws_district": "Thane" }, { "ws_type": "Jet ski", "ws_district": "Thane" }, { "ws_type": "Banana ride",

Ionic framework PWA Service worker caching / updating expected behaviour

I'm trying to get my head around service worker caching for an Ionic Angular app. My goal is to make an alert pop up: "New update available, click to reload the app", I believe I've followed all the correct practices based on my reading but am missing something as I am unable to reliably get the alert to pop up after an update. It will pop up but can take up to 24 hours - is the expeced behaviour? I am using four files: service-worker.js index.html .htaccess In service-worke

Ionic framework Ionic serve try again later [Failed to load index.html]

I've installed ionic and cordova but when I created an application and tried to run it i get this in terminal- ionic-app-scripts serve --address --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser [app-scripts] [19:17:47] ionic-app-scripts 3.1.11 [app-scripts] [19:17:47] watch started ... [app-scripts] [19:17:47] build dev started ... [app-scripts] [19:17:47] clean started ... [app-scripts] [19:17:47] clean finished in 3 ms [app-scripts] [19:17:47] copy st

Ionic framework Why Ionic 4 Framwork is not able to create an apk?

Hi I have used ionic cordova build android --prod --release this command for generating APK in Ionic 4 but I am getting error like this This is the code in the app.module.ts as the error is shown here only. import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { Ca

Ionic framework How to pick a specific array object in IonicFramework?

output sample: output In the furtherModules function, under the main module Environmental Compliance Management there is two sub modules which is Chemical Management and PPE Management, so when the user click Chemical Management it should go to a new page and when the user click PPE Management it should go to another page.I don't know how to do that. I really need help on this. home.html code: <ion-content class="outer-content"> <ion-card> <ion-card-header> {{

Ionic framework How do I store my count value in locally in the ionic app?

Hi guys I am working on this live project where I want to store the quantity/count values (1,2,3....) locally. I just need a little guidance with the code. I am learning ionic. This is my ts files code snippet. this.cartArr.push(items); this.dataPrint = this.cartArr; let item =this.dataPrint; let selected = {}; for(let obj of item){ if(selected[obj.ITEMID]){ selected[obj.ITEMID].count++; }else{ selected[obj.ITEMID] = {...obj,count: 1}; } } this.selectedItems = Obje

Ionic framework Geolocation is not working in Ionic 4 Android

To get the current location in Android device, I used Ionic 4 Geolocation plugin and followed the steps given in the documentation. On running the Ionic CLI command ionic cordova run android --l --c, it launches the Application and prompts the location permission dialog. But it throws an error like getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin. { PositionErrorcode: 1message:

Ionic framework How to structure page folders in Ionic in the best way?

I'm looking for a better way to organize the pages on Ionic, pages related to a subject, such as products, what do we have in products? Edit, register, list, details, what would the structure look like? product-edit product-list product-details product-add Or maybe this way? product edit add details list I do not know if these are the best options, can you help me please?

Ionic framework Setting line-height globally in Ionic 3

How do I set the default line-height globally in Ionic 3? In earlier versions there seems to have been an Ionic Sass variable for this, for example: But no longer in Ionic 3: Am I correct or am I missing something? Edit: What I am doing now is setting the line-height in each page scss, which works fine, but I want to be able to do it

Ionic framework ionic 4 increase checkbox icon size

I'm trying to increase the icon size in ion-checkbox but I couldn't find a way to do. I tried font-size, --size properties but they are increasing the overall width and height of the background instead of the check icon. HTML <ion-checkbox color="secondary" slot="start" size="large"> </ion-checkbox> CSS ion-checkbox { --background: var(--background-color); --background-checked: var(--background-color); --checkmark-color: var(--color-blue-me

Ionic framework How to find maximum time from array?

I have an array. I want to find the maximum time from array. I tried the follwing code. var maxtm = Math.max.apply(null, (e) { return e['time']; })); this.my_arr = [{ date: '21-jun-2019', time: '21:22:00' }, { date: '21-june-2019', time: '11:33:23', }, { date: '21-june-2019', time: '12:12:00' }] I expect the output '21:22:00', but the actual output is NaN.

Ionic framework What is the recommended way to center ion-menu contents vertically in an Ionic 4 project?

I need to vertically centre the ion-menu contents so that it is easier to access from a UX perspective. I am not sure of the best way to do it. This is the ionic starter project code, which was set up by ionic start myProjectName sidemenu. <ion-content> <ion-card class="welcome-card"> <ion-img src="/assets/shapes.svg"></ion-img> <ion-card-header> <ion-card-subtitle>Get Started</ion-card-subtitle> <ion-card-title>W

Ionic framework Is there a way to read Ion-Segment values to pass them to an Ion-Fab to run different functions depending on the SwitchCase?

I currently have an Ion-Segment with two switchCases. That is Management & Market. However I want to include a FAB button to run different functions depending on what SwitchCase the user is at. Ive already tried placing the FAB in the SwitchCase Options,however the FAB seems to be scrolling on with the page instead of sticking. The fab should run different functions for the different switch cases. //CODE FOR THE SEGMENT <ion-header> <ion-segment [(ngModel)]="options"

Ionic framework Ion-native Google map is not free, why it requires Api key?

I am using Ionic-native Geo-location for getting lat and lng but when i run the code i get to know that its for "development purpose only". i have tried v3 or others without api key. home.html <div class="map-wrapper"> <div id="map_center"> <img src="../../assets/icon/marker.png" /> </div> <div #map id="map"></div> </div> I expected google maps without api key because i am using ionic native plugin

Ionic framework ionic serve has unexpectedly closed (exit code 127)

ng.cmd run app:serve --host=localhost --port=8100 [ng] An unhandled exception occurred: Unknown browser query basedir=$(dirname "$(echo "$0" | sed -e 's. Maybe you are using old Browserslist or made typo in query. [ng] See "C:\Users\Ashwin\AppData\Local\Temp\ng-WujacN\angular-errors.log" for further details. [ERROR] ng has unexpectedly closed (exit code 127). The Ionic CLI will exit. Please check any output above for error details.

Ionic framework Ionic router failed

I have used ion-tabs and side-menu for change route the app, both uses routerLink. And when i press Home tab in ion-tab to go back to home page inside other pages, route changed to home but home page constructor method and onInit methods does not invoke. side-menu.component.ts <ion-app> <ion-split-pane contentId="main-content"> <ion-menu *ngIf="isAuthenticated$ | async" contentId="main-content" type="overlay"> <ion-co

Ionic framework Is there a way to have to ion-buttons side by side with an angle between them?

Kia Ora, I am trying to put two buttons side by side with an angle between them as demonstrated in the picture below, but I am struggling to even have the two buttons side by side with full length even with out an angle, and i am unsure if its even possible? here is my current code that uses and ion-grid, but they just appear as two buttons side by side not at full length, i figured if the expand property is set to full then this should be at full length? <ion-grid> <ion-row> <i

Ionic framework Ionic padding CSS Utility variable for each side separately

I'm trying to align an ion-label with padding/margin. Since ion-label does not directly offer CSS Custom Properties for padding or margin i tried to add them via CSS Utilities by adding utility classes like seen below <ion-label class="ion-padding-start ion-padding-top" position="stacked">some text</ion-label> This results in following css: I can style this padding simply by setting --ion-padding: 100px;. So far so good... The issue is how can i have different

  1    2   3   4   5   6  ... 下一页 最后一页 共 22 页