@ElGerda wrote:
I am making my first app in ionic and i am pretty bad at coding etc.
How can i enter values from a database into an ion-select “combobox”?
Like i have in my database: Audi, BMW, Mercedes
And then i want to implement a combobox which is filled with those entrys.
Posts: 1
Participants: 1
@mlynch wrote:
I’m trying to create a table-like layout in Ionic v4 using
<ion-grid>code, and I’m looking for a way to make an<ion-col>element span two rows. Is this possible?
Posts: 1
Participants: 1
@Grouvie wrote:
I have a login function with different alerts and loaders.
I now upgraded to ionic 4 from ionic 3 and the alert and loader functions
don’t work like before. I tried to update my function, but I’m stuck at one point.My function is:
async signIn() { //// check to confirm the username and password fields are filled if (this.username.value == "") { let alert = await this.alertCtrl.create({ header: "ATTENTION", subHeader: "Username field is empty", buttons: ['OK'] }); return await alert.present(); } else if (this.password.value == "") { let alert = await this.alertCtrl.create({ header: "ATTENTION", subHeader: "Password field is empty", buttons: ['OK'] }); return await alert.present(); } else { var headers = new Headers(); headers.append("Accept", 'application/json'); headers.append('Content-Type', 'application/json'); let options = new RequestOptions({ headers: headers }); let data = { username: this.username.value, password: this.password.value }; let loader = await this.loading.create({ message: 'Processing please wait', }); return await loader.present().then(() => { //alerts stop working here, because they are not inside an async function //without the alerts the script works this.http.post('localhost/login.php', data, options) .pipe( map(res => res.json())) .subscribe(res => { console.log(res) loader.dismiss() if (res == "Your Login success") { let alert = await this.alertCtrl.create({ header: "CONGRATS", subHeader: (res), buttons: ['OK'] }); this.authService.login(); return await alert.present(); } else { let alert = await this.alertCtrl.create({ header: "ERROR", subHeader: "Your Login Username or Password is invalid", buttons: ['OK'] }); return await alert.present(); } }); }); } }I hope someone can help me to solve this problem and help me to change my function.
Thx a lot.
Posts: 1
Participants: 1
@Diesel555 wrote:
Has anyone received this error with google maps APIs (not Cordova) on iOS:
[Error] Google Maps JavaScript API error: UnauthorizedURLForClientIdMapError
https://developers.google.com/maps/documentation/javascript/error-messages#unauthorized-url-for-client-id-map-error
Your site URL to be authorized: capacitor://localhost/tabs/map
capacitorConsole (user-script:2:79)
Jc (js:54:134)
(anonymous function) (common.js:73:365)
(anonymous function) (common.js:139:167)
c (common.js:67:86)
Global Code (AuthenticationService.Authenticate:1)It just started randomly, which makes me wonder if other Ionic users are having this issue. It works fine in Android and on the web. I’m in touch with their support, it started on its own with no updates on my end.
Posts: 1
Participants: 1
@erodriguezAcisa wrote:
Hi!
I want to develop 3 frontends projects, a web for PC, a app for Android, and a app fot IOS, and the three have the same forms and the same fields. Can I develop a only project with the same code and get the three frontends with Ionic?
Regards
Posts: 1
Participants: 1
@Rudeblory wrote:
When trying to build an application for Android, the following error appears, how to fix it?
C:\Users\rudeb\Documents\Ionic Apps\Bochka>ionic cordova build android > ionic-app-scripts build --target cordova --platform android [19:53:33] ionic-app-scripts 3.2.2 [19:53:34] build dev started ... [19:53:34] clean started ... [19:53:34] clean finished in 29 ms [19:53:34] copy started ... [19:53:34] deeplinks started ... [19:53:34] deeplinks finished in 32 ms [19:53:34] transpile started ... [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page5/page5.ts, line: 5 Individual declarations in merged declaration 'Page5Page' must be all exported or all local. L4: import { Page6Page } from '../page6/page6'; L5: import { Page5Page } from '../page5/page5'; [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page5/page5.ts, line: 5 Import declaration conflicts with local declaration of 'Page5Page'. L4: import { Page6Page } from '../page6/page6'; L5: import { Page5Page } from '../page5/page5'; [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page5/page5.ts, line: 11 Individual declarations in merged declaration 'Page5Page' must be all exported or all local. L11: export class Page5Page { L12: // this tells the tabs component which Pages [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page6/page6.ts, line: 5 Individual declarations in merged declaration 'Page6Page' must be all exported or all local. L4: import { Page2Page } from '../page2/page2'; L5: import { Page6Page } from '../page6/page6'; [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page6/page6.ts, line: 5 Import declaration conflicts with local declaration of 'Page6Page'. L4: import { Page2Page } from '../page2/page2'; L5: import { Page6Page } from '../page6/page6'; [19:53:39] typescript: C:/Users/rudeb/Documents/Ionic Apps/Bochka/src/pages/page6/page6.ts, line: 11 Individual declarations in merged declaration 'Page6Page' must be all exported or all local. L11: export class Page6Page { L12: // this tells the tabs component which Pages [19:53:39] ionic-app-script task: "build" [19:53:39] Error: Failed to transpile program Error: Failed to transpile program at new BuildError (C:\Users\rudeb\Documents\Ionic Apps\Bochka\node_modules\@ionic\app-scripts\dist\util\errors.js:16:28) at C:\Users\rudeb\Documents\Ionic Apps\Bochka\node_modules\@ionic\app-scripts\dist\transpile.js:159:20 at new Promise (<anonymous>) at transpileWorker (C:\Users\rudeb\Documents\Ionic Apps\Bochka\node_modules\@ionic\app-scripts\dist\transpile.js:107:12) at Object.transpile (C:\Users\rudeb\Documents\Ionic Apps\Bochka\node_modules\@ionic\app-scripts\dist\transpile.js:64:12) at C:\Users\rudeb\Documents\Ionic Apps\Bochka\node_modules\@ionic\app-scripts\dist\build.js:109:82 [ERROR] An error occurred while running subprocess ionic-app-scripts. ionic-app-scripts build --target cordova --platform android exited with exit code 1. Re-running this command with the --verbose flag may provide more information.
Posts: 1
Participants: 1
@fahd123 wrote:
Please how to pass data betwen pages (ionic 4) with this.router.navigateByUrl(‘page’);
Posts: 1
Participants: 1
@bengold wrote:
Getting an error with one of the plugins couldnt figure this out:
Error - Plugin error (you probably need to remove plugin files from your app): Fetching plugin “cordova-sqlite-storage@^2.5.1” via npm Installing “cordova-sqlite-storage” at “2.6.0” for ios Error during processing of action! Attempting to revert… Failed to install ‘cordova-sqlite-storage’: CordovaError: Uh oh! “/private/tmp/gimlet/3448644/project/cordova/plugins/cordova-sqlite-storage/node_modules/cordova-sqlite-storage-dependencies/sqlite3.c” not found! at copyFile
Posts: 1
Participants: 1
@HariNaTao wrote:
I have an Ionic 4 / Capacitor.js / Vue.js app and am trying to set a transparent header.
I’m using these versions
"@capacitor/android": "^1.0.0-beta.17", "@capacitor/cli": "^1.0.0-beta.17", "@capacitor/core": "^1.0.0-beta.17", "@capacitor/ios": "^1.0.0-beta.17", "@ionic/core": "^4.0.1", "@ionic/vue": "0.0.1",What happens is when I set the translucent prop on the
<ion-header>tag like this
<ion-header translucent="true" no-border>
save, then let it hot reload, the header shows up as transparent as I would expect. But navigating away and then back, or reloading the browser, and the header reappears.subsequent reloads and the header reappears as white
The component in question is below. If it helps, this component is inside an
<ion-tab>within an<ion-tabs>. I’ve also tried using the vue syntax of:translucent="true"to no avail. Also this behaviour is present in web browser and android emulator. I’ve tried everything in the documentation but the fact that it works pre-reload and then fails after leads me to believe there is a bug here. If not, has anyone an example of transparent headers working within vue? The solutions I have found are either angular related or extremely hacky for something that should be as simple as setting a prop<template> <div> <ion-header translucent="true" no-border> <ion-toolbar> <ion-buttons> <ion-back-button></ion-back-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content fullscreen text-center> <div class="content-secondary"> <ion-card color="light"> <ion-card-header> <ion-text class="card-title-top">YOUR</ion-text> <ion-text class="card-title-bottom">DASHBOARD</ion-text> </ion-card-header> <ion-card-content> <p style="">Welcome to your Stirfry Republic Member Dashboard!</p> <p style="">You currently have {{ formatRewardText }}</p> <Modal :item="rewards" modalComponent="rewards" > <ion-text slot="modalcontent" color="primary" style="">Rewards: Use unique codes to get discounts and free stuff.</ion-text> </Modal> <Modal :item="points" modalComponent="points"> <ion-text slot="modalcontent" color="primary" style="">Points: Get points for the dollars you spend on meals.</ion-text> </Modal> <ion-text>Everything here is fresh and prepared in-house (we do all our own software development), so if you find a bug, <a href="#" @click="share">send us an email</a>!</ion-text> </ion-card-content> </ion-card> </div> </ion-content> </div> </template> <style scoped> ion-content { --background: url('../assets/hero-bg-02-min.jpg') no-repeat center center / cover; } ion-toolbar { --background: transparent !important; --ion-color-base: transparent !important; } </style>
Posts: 1
Participants: 1
@safaAlshaarri wrote:
i have a project where i have folder for images the issue that i change the whole content of the image folder the issue is that when i do run android the new content disappear and the old content back again
how i can fix that
Posts: 1
Participants: 1
@RichardZhuang wrote:
I nearly finished my Ionic App Development and it works perfectly fine on my Android Emulator (Pixel 2 XL, Android API 27). But When I deploy it to my phone, it results in several problems.
There should be a parent-child relationship in my dishdetail and menu page - when clicking on the picture on menu page, the user will be redirected to the dishdetail page. But this “click-redirect” action doesn’t work on my device.
There is also an option that the user is able to add a specific dish into the favorite list. Then the favorite list is stored externally in the device. However, when I open the favorites page, a “TypeError: Cannot Read Property ‘some’ of null” occurs and no data is loaded.
I suspect that the problem may lie in that the app is not able to get the storage on the device, so I deploy android-permissions to aid me with this. But it still doesn’t seem to work.
Below is my favorite.ts provider (the problem can only in the “this.favorites.some” part, right?).
imports... @Injectable() export class FavoriteProvider { favorites: Array<any>; constructor(public http: Http, private dishservice: DishProvider, private storage: Storage, private localNotifications: LocalNotifications) { console.log('Hello FavoriteProvider Provider'); this.favorites = []; this.storage.get('favorites').then( favor => this.favorites = favor ); } addFavorite(id: number): boolean { if (!this.isFavorite(id)) this.favorites.push(id); console.log('favorites', this.favorites); this.storage.set('favorites', this.favorites); this.localNotifications.schedule({ id: id, text: 'Dish ' + id + ' added as a favorite successfully', }); return true; } isFavorite(id: number): boolean { return this.favorites.some(el => el === id); } getFavorites(): Observable<Dish[]> { return this.dishservice.getDishes() .map(dishes => dishes.filter(dish => this.favorites.some(el => el === dish.id))); } deleteFavorite(id: number): Observable<Dish[]> { let index = this.favorites.indexOf(id); if (index >= 0) { this.favorites.splice(index, 1); this.storage.set('favorites', this.favorites); return this.getFavorites(); } else { console.log('Deleting non-existant favorite', id); return Observable.throw('Deleting non-existant favorite' + id); } } }Ionic:
ionic (Ionic CLI) : 4.10.2 (C:\Users<Username>\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 11 other plugins)System:
NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10Please let me know if you need any further information.
Posts: 1
Participants: 1
@monkeytronics wrote:
Hi all,
Here’s a tiny piece of code:
<div id="canvas-div-gauge" style=" margin: none; height:40vh"> <ion-row > <ion-col size="5"> <canvas id="chart-temp-gauge" style="width:43vw"></canvas> </ion-col> <ion-col size="5"> <canvas id="chart-hum-gauge" style="width:43vw"></canvas> </ion-col> </ion-row> </div>Now, I’ve tried this with and without the width,and with and without useing the size (since default should be 2 equal columns). What i see is that the contents don’t go into columns. They end up above one another! Until I use a larger device (either my browser or choosing an ipad X from the emulator. Then they work. How can I use the ionic grid to give me what I want. I.e. the two canvas elements on the same line. Obvously they may need to be smaller to achieve this.
Also tried col-50. No better.
Posts: 1
Participants: 1
@silvairsoares wrote:
I am using the command:
ionic generate component accordion-list
Then the following directory structure is created automatically:
components
-accordion-list
–accordion-list.html
–accordion-list.scss
–accordion-list.ts
components.moduleSo I’m trying to make a hello world with my custom component on any html page, like this:
It already includes and excludes entries for my custom component in the files: “app \ app.component.ts” and “app \ app.module.ts”.
However, I still get the following error on the console:
-------------------- Error --------------------
ERROR Error: Uncaught (in promise): Error:
Template parse errors:
‘accordion-list’ is not a known element:
If ‘accordion-list’ is an Angular component, then verify that it is part of this module.
If ‘accordion-list’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
[ERROR ->]
-------------------- Error ------------------------------------ My Environment --------------------
Angular CLI: 7.3.2
Node: 8.11.2
OS: win32 x64
Angular: 5.2.10
… animations, common, compiler, compiler-cli, core, forms
… http, platform-browser, platform-browser-dynamicPackage Version
@angular-devkit/architect 0.13.2 (cli-only)
@angular-devkit/build-optimizer 0.0.35
@angular-devkit/cor 7.3.2 (cli-only)
@angular-devkit/schematics 7.3.2 (cli-only)
@schematics/angular 7.3.2 (cli-only)
@schematics/update 0.13.2 (cli-only)
rxjs 5.5.11
typescript 2.6.2
webpack 3.8.1Ionic 4.10.3
---------------- My Environment ------------------------------------- My questions --------------------
What are the correct locations for referencing my custom components?
Sorry for the outburst. But for what reason the command “ionic generate component …” does not make the necessary entries. Would not it be more intuitive?
----------------- My questions --------------------
Posts: 1
Participants: 1
@mdineshkumarhr wrote:
Hi I have created a page html with following codes for item sliding
<ion-list #mylist> <ion-item-sliding *ngFor="let item of items"> <ion-item> <ion-label text-wrap "> {{item.name}} </ion-label> </ion-item> <ion-item-options side="end"> <ion-item-option color="secondary" (click)="update(item)"> <div slot="icon-only"> <ion-icon name="create"></ion-icon> </div> </ion-item-option> <ion-item-option color="danger" (click)="delete(item.id)"> <div slot="icon-only"> <ion-icon name="trash"></ion-icon> </div> </ion-item-option> </ion-item-options> </ion-item-sliding> </ion-list>item sliding works but icon is always in vertically top instead of vertically middle of item option. kindly help me in fixing this.
Posts: 1
Participants: 1
@aishusara wrote:
Hi,
I’m trying to create “Virtual Floor Area Measuring App”. As it only can be achieve by Augmented Reality, I have gone through ar.js and wikitude . But these 2 not having enough documents / explanation regarding floor measuring. Is there any other possibility to do this? If it so, Kindly share the info.
Posts: 1
Participants: 1
@thkimionic wrote:
When I searched ionic3 document for ionic3 component or api,
It redirect to ionic 4 document and the result not applicable to ionic 3.
It makes me very inconvenience.
Posts: 2
Participants: 2
@Cabz wrote:
Hey guys,
I add an html using the method below:
for (var i = this.controls.length - 1; i >= 0; i--) { console.log('control: '+this.controls[i]); document.getElementById('control-'+i).innerHTML = this.controls[i]; }I used this since i using [innerhtml] strips the “(click)” in the html and this works fine
but “(click)” won’t work and nothing is happening, not even an error appears.
here the code for the function to be called by click:
openGlossary(){ console.log('opening glossary....'); }
Posts: 1
Participants: 1
@OmDIonic wrote:
Hi All
In my app I am using oauth2 but have an issue with redirecting to ionic app.
Workflow
1.Opening Ionic app and on click of button external link is opening for signup
2.Once signup done that webpage is posting code id onto app
3.I mention redirect url as localhost but website not redirect to app and not posting data
4.I tried with https with ip but not worked.
5.Tried ssl with ionic cordova run android but not workedTesting on Emulator and Mobile.
getting error ERR_NAME_NOT_RESOLVED.If any one have any workflow please let me know.
Posts: 1
Participants: 1
@yogeshyoyo wrote:
Can anyone help me how to achieve this is ionic 3 or 4 please. start and end time should be selectable using range icon…
Posts: 1
Participants: 1
