@angelarg wrote:

Hi!
I’m currently trying to convert an XML to a JSON Object in my Ionic app. I’ve tried the x2js plugin and also jsonix (but this one won’t work). The thing is, with x2js I can convert the xml to a json with the same attribute names of each field, but what i want is to rename them in the object.
let’s say the XML has an attribute “n” and i want it to be mapped as “name” in the object.
(I know this can be done with JAXB in a java project, for example)

I appreciate your support in advance.

cli packages:

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

local packages:

@ionic/app-scripts : 3.1.11
Cordova Platforms  : android 6.4.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v6.10.3
npm               : 5.6.0
OS                : Windows 10

Posts: 1

Participants: 1

Read full topic

@askona1 wrote:

I have modal component, created with

async openCalendar() {
        const modal = await this.modalController.create(<any>{
            component: CalendarComponent
        });
        return await modal.present();
    }

I saw, that ion-modal have –background property, but it doesn`t affect my calendar modal. My calendar modal have app-calendar selector, I tried
app-calendar{
–background:red;
}
ion-content {
–background: red;
}

It doesn`t work.

Posts: 1

Participants: 1

Read full topic

@Ludolefrenchy wrote:

I have a problem to try my app on emulator and I would like to uninstall and then reinstall android but I get an error and do not delete

PS C:\Users\ludo\migration> ionic cordova platform rm android --force
> cordova platform remove android --save
rm: could not remove file (code EBUSY): C:\Users\ludo\migration\platforms\android/app/google-services.json

rm: could not remove file (code EBUSY): C:\Users\ludo\migration\platforms\android/app/google-services.json
rm: could not remove directory (code ENOTEMPTY): C:\Users\ludo\migration\platforms\android/app

rm: could not remove file (code EBUSY): C:\Users\ludo\migration\platforms\android/app/google-services.json
rm: could not remove directory (code ENOTEMPTY): C:\Users\ludo\migration\platforms\android/app
rm: could not remove directory (code ENOTEMPTY): C:\Users\ludo\migration\platforms\android

Removing platform android from config.xml file...
PS C:\Users\ludo\migration>

an idea?

thank you in advance

ludo

Posts: 1

Participants: 1

Read full topic

@Remzy wrote:

I follow this instructions to generate custom icon ionic cordova resources

How can I use generated custom icon in code?

I tried: <ion-icon src="/path/to/external/file.svg"></ion-icon>

also

ion-icon {
&[class*=“custom-”] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
&[class*=“custom-lock”] {
mask-image: url(…/assets/kljuc.svg);
}
};

Posts: 1

Participants: 1

Read full topic

@raghavendrav90 wrote:

Hi,

I am a newbie in ionic. I am trying to create a simple app with ionic + sqlite db.
But, every time I run I am getting the following error.

core.js:15714 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'then' of undefined
TypeError: Cannot read property 'then' of undefined

here is the app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

   private db: SQLiteObject;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar, 
    private sqlite: SQLite

  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.createDB();
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  private createDB() {
     alert('database creating')
    this.sqlite.create({
      name: 'myDB.db',
      location: 'default'
    })
    .then((db: SQLiteObject) => {
      alert('database created')
      this.db = db;
      // this.createTable();
    })
    .catch(e => alert(e));
  }
}

can anybody help me to solve this.

Regards

Posts: 1

Participants: 1

Read full topic

@fontventa wrote:

Hi, I’ve got a problem with the live deploy’s feature. When I upload a new version via git, there are times that, when downloaded from the app, it’s like i lose all the live deploy’s updates and I’m back into the store version.

Versions:

Ionic: 4.3.1
Cordova CLI: 8.0.0
ionic-plugin-cordova: 6.1.0
Node: v8.11.1

Everytime I run:

git add .
git commit -m "test"
git push ionic production

And, after downloading the update like this…

checkUpdates() {
    if (!this.platform.is('core') && !this.updateWindow && window != undefined && window.IonicCordova != undefined && window.IonicCordova.deploy != undefined) {
      // Initialize the deploy plugin (OPTIONAL)
      window.IonicCordova.deploy.init(this.configDeploy, (res: any) => {
        console.log(res)
      }, (err: any) => {
        console.log(err);
      })
      // Check for available updates
      window.IonicCordova.deploy.check((res: any) => {
        if (res === 'true') {
          // A new version is ready to download
          this.alertService.showConfirm("Hay una actualización disponible. ¿Desea actualizar la aplicación?", "Actualización disponible")
            .then((resp) => {
              if (resp == 'yes') {
                let toast = this.toastCtrl.create({
                  message: 'Descargando...',
                  position: 'bottom',
                  showCloseButton: false,
                  dismissOnPageChange: true
                });
                toast.present();
                window.IonicCordova.deploy.download((res: any) => {
                  if (res === 'true') {
                    // We can unzip the latest version
                    window.IonicCordova.deploy.extract((res: any) => {
                      if (res === 'true' || (this.utils.isNumber(res) && res == 1)) {
                        this.alertService.hideLoading();
                        // we are ready to load the new version
                        window.IonicCordova.deploy.redirect(() => {
                          this.nav.setRoot(LoginPage);
                        }, (e: any) => {
                          toast.setMessage('Error al instalar la actualización')
                        })
                      }
                    }, (e: any) => {toast.setMessage('Error al instalar la actualización')})
                  }
                }, (e: any) => {toast.setMessage('Error al descargar la actualización')});
              }
            });
        }
      }, (e: any) => {
        this.alertService.showToast("Error al comprobar nuevas versiones.");
      })
    }
  }

… there are times that my app is back into the store version… And I don’t know why.
Any thoughts are welcome. Thank you very much!

Posts: 1

Participants: 1

Read full topic

@franzisk4sis wrote:

I have a very important question.

If I update Ionic CLI from 3.2.0 to 4.9.0 what happens with my Ionic 3 projects??
I really don’t want to face “new” problems on my Ionic 3 projects (I already have problems enough).

What would be the difference since I update it?

When I run some ionic command (like ionic serve) I get this message:
The Ionic CLI has an update available (3.20.0 => 4.9.0)! Would you like to install it? (Y/n)

So far I did not feel confident enough to update it, I can not ruin my projects now, every time I update something I get several problems in the projects.

My question is because meanwhile I would like to go trying a bit of Ionic 4 too.

Posts: 1

Participants: 1

Read full topic

@Manel00 wrote:

Error: Uncaught (in promise): Error: Can't resolve all parameters for XXXPage: ([object Object], [object Object], [object Object], [object Object], [object Object], ?).

Where i have to take a look? .ts? .html? It’s being a little bit annoying when gives this kind of error because it aren’t explicit…

Thanks you so much

Posts: 6

Participants: 4

Read full topic

@pettrin wrote:

Select first element in array

My Select

 <ion-item>
   <ion-label floating color="primary" interface="popover">Opções de Parcelamento</ion-label>
   <ion-icon name="pricetags"></ion-icon>
   <ion-select class="myCustomSelect" [(ngModel)]="formaVezes" [ngModelOptions]="{standalone:true}">
     <ion-option *ngFor="let p of parcelamentosArray" [value]="p.type" [selected]="p.type[0]" > {{ p.value}}  </ion-option>
  </ion-select>
</ion-item>

My Array

console.log(this.parcelamentosArray);

(8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {type: "1"value: "1x de R$ 38,50 (sem juros)"}
1: {type: "2"value: "2x de R$ 20,12 - Total: R$ 40,24 (2.99% a.m)"}
2: {type: "3", value: "3x de R$ 13,61 - Total: R$ 40,82 (2.99% a.m)"}
3: {type: "4", value: "4x de R$ 10,36 - Total: R$ 41,42 (2.99% a.m)"}
4: {type: "5", value: "5x de R$ 8,40 - Total: R$ 42,02 (2.99% a.m)"}
5: {type: "6", value: "6x de R$ 7,11 - Total: R$ 42,63 (2.99% a.m)"}
6: {type: "7", value: "7x de R$ 6,18 - Total: R$ 43,24 (2.99% a.m)"}
7: {type: "8", value: "8x de R$ 5,48 - Total: R$ 43,86 (2.99% a.m)"}

what I can do for pre select this element first?

0: {type: "1"value: "1x de R$ 38,50 (sem juros)"}

Posts: 5

Participants: 2

Read full topic

@mofeisa wrote:

Hi everyone,

How can I build ionic 3 app with online activation for the app only for first running.

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@LucaFeger wrote:

Is there any way to push a pre rendered page into the view?
My component has very complex mechanics behind the rendering so I won’t render it every time, I switch pages.

Posts: 1

Participants: 1

Read full topic

@MarcFL wrote:

Hello,

I use ionic-v3 to create a Tabs App. There is issue that tabs inactive icon color not visible on iOS

In my variables.scss I set tabs colors like this:

$tabs-background: color($colors, primary); // #2094A7
$tabs-tab-color-inactive: #142735;
$tabs-tab-color-active: #FFFFFF;
// For iOS
$tabs-ios-tab-text-color: $tabs-tab-color-inactive;
$tabs-ios-tab-icon-color: $tabs-tab-color-inactive;
$tabs-ios-tab-text-color-active: $tabs-tab-color-active;
$tabs-ios-tab-icon-color-active: $tabs-tab-color-active;

In my tabs.scss:

page-tabs {
.tab-button-text {
font-family: $font-montserrat-semibold;
font-size: 3.5vw;
}
}

All right on Android

and on iOS, the text color show correctly and the active icon color is right too just like the photo.

when I test on browser, I found the color property of tabs ion-icon has correctly setted

by example for the tab calendar:

So is anyone has this issue and how do you solved?

Thanks

Posts: 1

Participants: 1

Read full topic

@schngrg wrote:

How to customize CSS of components in Ionic v4?

We have some not-so-common requirements in Ionic v3 apps, which we would like to upgrade to v4 someday soon. Like making a tab icon blink in some cases (to alert user to check something urgent that has showed up on that tab). Customizing list-view and list-item’s label/icon for the margins and borders. Making the entire background of tabs/pages transparent to see-through whatever is underneath (and also let the clicks pass-though). Customizing sliders to ‘start’ from the middle instead of from the left. Changing text size/color/alignment for some alerts, action-sheets. etc…

I think the recommended way now is to use the API variables instead of customizing/overwriting internal CSS of Ionic components but that is unlikely to ever cover ‘all’ the possible cases. There are way too many cases for how every app would want to customize the look and feel. Its good to have these API variables to cover more and more of the common cases over time, making it much easier and blissful to use Ionic. But that definitely can’t be the only way - I don’t think Ionic team will ever be able to cover all such cases. And maybe they shouldn’t, not every customization that a designer/customer asks for will be a good idea - some of them are terrible ideas - but they need to be implemented anyway and probably shouldn’t become a part of standard Ionic API/features.

So while using API variables should be preferred wherever possible, how can the CSS of components be customized for rest of the cases? Any pointer to standard documentation about this will help.

Posts: 2

Participants: 1

Read full topic

@Akarsh12 wrote:

I am building a mobile app through wordpress rest api. So the ads in the wordpress website are not visible on my app. Can anyone please help me with this.

Posts: 1

Participants: 1

Read full topic

@BrankoEnero wrote:

I’m trying to test Virtual Scroll into an ion-list by using jasmine, but it never renders.

There someone knowing some way to test that directive?

Thanks!!

Posts: 1

Participants: 1

Read full topic

@erald123 wrote:

I trying to figure out how to navigate between pages in Ionic 4.In v3 the way is:

import { Component } from '@angular/core';
import { WelcomePage } from '../welcome/welcome';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  openWelcomePage() {
    this.navCtrl.push(WelcomePage);
  }
}

but in v4 is giving an error:

Posts: 3

Participants: 3

Read full topic

@Fouk wrote:

Hello everyone,

I work with Ionic v4.0 final release.
I try to call ion-select by viewchild with interface = ‘popover’ but dont work
If i try with interface = ‘action-sheet’ or interface = ‘alert’, it’s work perfectly

TypeScript

import { Component, ViewChild } from '@angular/core';
import { IonSelect } from '@ionic/angular';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {
    @ViewChild('mySelect') public myselect: IonSelect;
    public colorSelected = '#ff6600';

    open() {
        this.myselect.interface = 'popover';
        this.myselect.open();
    }
}

HTML

<ion-toolbar>
    <ion-title>Ionic Blank</ion-title>

    <ion-buttons slot="end">
        <ion-button color="primary" (click)="open()">
            <ion-icon slot="icon-only" name="color-palette" [ngStyle]="{'color': colorSelected}"></ion-icon>

            <ion-select #mySelect [hidden]="true" [(ngModel)]="colorSelected">
                <ion-select-option value="#ff6600">Orange</ion-select-option>
                <ion-select-option value="#cccc00">Yellow</ion-select-option>
                <ion-select-option value="#000000">Black</ion-select-option>
                <ion-select-option value="#0066ff">Blue</ion-select-option>
            </ion-select>
        </ion-button>

    </ion-buttons>
</ion-toolbar>

Anyone have an idea ? I need popover

Thx !

Posts: 1

Participants: 1

Read full topic

@safaAlshaarri wrote:

hi every one im using ionic and using voice rocord so i used

import { MediaCapture } from ‘@ionic-native/media-capture’;
import { File } from ‘@ionic-native/file’;

import { Media } from ‘@ionic-native/media’;
but im getting this error

image.png1920×1080 331 KB

and this one too

image.png1920×1080 327 KB

Posts: 2

Participants: 2

Read full topic

@blauwberry wrote:

We are looking into Ionic to see if we can merge our Xamarin App & Electron app into a single codebase. When reading the documentation it’s not completely clear what the limitations are.

We need an app which can download & sync presentations. Presentations are created as static HTML5 and can run standalone in a separate webview.

What we need is an overview with available presentations, a downloader/updater, and when ready a webview to show the downloaded content. This surrounded with a simple interface.

From previous apps we know that a big amount of files (downloading / checking / syncing) can be a bit heavy. Before we are going to start with ionic I hope you guys could tell me if it’s possible.

I read different options for downloading content. We would like to store the files in the app. A presentation can contain all kind of assets, videos from 30MB or complete presentations of 300MB. We would like to store the data in separate folders and just open the .index.html. All relative assets need to stay in the same folder.

Is there a good plugin that works with a local file api for each platform?

Posts: 1

Participants: 1

Read full topic

@schngrg wrote:

Goal here is to do an incremental update or incremental adoption of newer Ionic4 components while letting the larger app (including navigation) stay v3, for a while.

Ionic v4 can be added to an app just by including it in html, like this:

<link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>

If we do this in a v3 app, my concern is that some of the ionic-component names are common between Ionic v3 and v4. Which is likely to cause confusion/errors.

Has anyone tried this? Is this is likely to fail magnificently and not even worth trying, or can it mostly work if done with some care?

Can it be worth the effort to do a custom build of Ionic v4 where all v4 component names are prefixed like <v4-ion-button> etc… to allow for easier and incremental migration/adoption of v4 in larger apps?

Posts: 1

Participants: 1

Read full topic