Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49526 articles
Browse latest View live
↧

Android Usage Stats

March 22, 2020, 7:15 am
↧
Search

Json to Excel

March 22, 2020, 7:29 am
$
0
0

@neerav94 wrote:

Hi,

How can we convert a json data to xlsx file in Ionic 4. I tried using xlsx package but it is not downloading the file in mobile, though it is working fine in browser when we do ionic serve.

Posts: 1

Participants: 1

Read full topic

↧
↧

Where should I put JS & CSS files that I need to reference in my ionic app?

March 22, 2020, 7:44 am
$
0
0

@Sweg wrote:

I am trying to add the leaflet-icon-pulse plugin to my ionic app.

The readme says

Include the CSS and JavaScript files located in \dist directory.

<script src="../L.Icon.Pulse.js" /> 

  <link rel="stylesheet" href="../L.Icon.Pulse.css" />

Here are the 2 things I don’t know:

  1. Where do I put the above scripts? I thought I should put them inside the head tag in index.html

  2. Where should I find the above JS & CSS files mentioned? Do I have to create a folder & copy those in there?

Posts: 1

Participants: 1

Read full topic

↧

Unable to successfully import zoomHome plugin in ionic app

March 22, 2020, 8:10 am
$
0
0

@Sweg wrote:

I am trying to add the zoomHome plugin to my ionic app.

Here are the steps I’ve taken so far:

  1. I added the below links inside the head section of index.html:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script src="assets/external-assets/leaflet.zoomhome.min.js"></script>
<link rel="stylesheet" href="assets/external-assets/leaflet.zoomhome.css" />

In my assets folder, I created a sub folder called external-assets, & copied the following files from https://github.com/torfsen/leaflet.zoomhome/tree/master/dist:

  • leaflet.zoomhome.css
  • leaflet.zoomhome.min.js

Here, I set the default zoom as false:

this.map = L.map('map', {
      center: [lat, lng],
      zoomControl: false
    });

Then I add the zoomHome control:

let zoomHome = L.Control.zoomHome({ position: 'topright' });
zoomHome.addTo(this.map);

However, when I run ionic serve, I get this console error:

Uncaught ReferenceError: L is not defined
at leaflet.zoomhome.min.js:5

This error is also printed:

Error: Uncaught (in promise): TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome is not a function
TypeError: leaflet__WEBPACK_IMPORTED_MODULE_3__.Control.zoomHome is not a function
at HomePage.initMap

Can someone please tell me what I’m doing wrong, & how it can be resolved?

Posts: 1

Participants: 1

Read full topic

↧

Click inside ion-card not working "ionic 5"

March 22, 2020, 8:30 am
↧
↧

Dowload and open pdf file in device

March 22, 2020, 8:40 am
$
0
0

@ashok12 wrote:

i get pdf file from web service and i want to download it and open it in my android device.
using this code

fileTransfer.download(url,this.file.externalDataDirectory+ filename).then((entry) => {
this.localNotifications.schedule({
text: ‘Téléchargement de fichier’+filename+’ est terminé !!’,
led: ‘FF0000’,
sound: null
});

download the pdf file but connot open it because it has been saved as “invalid format” !!!
i have been read a lot about encoding to base64!
is there any idea or example code to save pdf file in the right format??

Posts: 2

Participants: 2

Read full topic

↧

Can't get Sqlite plugin to work in my app

March 22, 2020, 8:50 am
$
0
0

@accron wrote:

I’m using this Sqlite plugin with Capacitor.
I’m running my app on an Android emulator and debug on Chrome devtools.
Any operation I do (e.g. openDatabase()) fails with a Note implemented error.

Am I missing some config?

Posts: 1

Participants: 1

Read full topic

↧

Google Play Services

March 22, 2020, 9:10 am
$
0
0

@Treeman92 wrote:

Hello,

i want to use Google Play Services in my Ionic Project. I want to show a highscore leaderboard.
I found this plugin: https://ionicframework.com/docs/native/google-play-games-services

I installed it like this:
cordova plugin add cordova-plugin-play-games-services --variable APP_ID="XXXX"
npm install @ionic-native/google-play-games-services

Then i removed the platform android:
ionic cordova platform rm android

After that i tried to build the debug apk:
ionic cordova build android

Then i get following error:

error: package com.google.android.gms.games.request
does not exist
import com.google.android.gms.games.request.GameRequest;

Maybe someone can help me?

Best regards,
Lukas :blush:

Posts: 1

Participants: 1

Read full topic

↧
Search

How can i add arbritrary properties to dom objects in the cli?

March 22, 2020, 9:43 am
$
0
0

@alexmehler wrote:

in ionic-cli i cannot just do

div.myProperty = “Hello”;

its works in normal html page with ionic script imports of course …

anyone got a solution ?

Posts: 1

Participants: 1

Read full topic

↧
↧

Tabs bug routing app

March 22, 2020, 10:36 am
$
0
0

@aormontero wrote:

Hello everybody, i am creating a ionic 5 app and having some problems in order to router my app.
When i start a tabs applications the app routing module is this by default and works ok

Screen Shot 2020-03-22 at 11.30.47
Screen Shot 2020-03-22 at 11.30.47715×397 34.3 KB

But if i add another path in order to redirect to this component the app crash.

Screen Shot 2020-03-22 at 11.30.47
Screen Shot 2020-03-22 at 11.30.47715×397 34.3 KB

This is the error

core.js:6014 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/tab1’
Error: Cannot match any routes. URL Segment: 'tabs/tab1’

Posts: 1

Participants: 1

Read full topic

↧

E.target doesnt transport ANY attribute , dom method , or whatever in the cli

March 22, 2020, 10:43 am
↧

Issues with community plugins not being accessible

March 22, 2020, 12:26 pm
$
0
0

@dnlgrwd wrote:

I have an Angular Ionic application using Capacitor. I am trying to include the following plugin for voice recording: https://bitbucket.org/tchvu3/capacitor-voice-recorder/src/master/

I followed the steps to npm install --save capacitor-voice-recorder, have the following in my code:

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

import { Plugins } from "@capacitor/core";
@Component({
    selector: 'app-my-page',
    templateUrl: './my-page.page.html',
    styleUrls: ['./my-page.page.scss'],
})
export class MyPage implements OnInit {

    constructor() { }

    ngOnInit() { }

    async showData() {
        const { VoiceRecorder } = Plugins;
        console.log(VoiceRecorder);
        console.log(Plugins);
    }
}

I already had android added for the project, but to be sure, I removed the android folder and ran:

npx cap add android
npx cap copy android
npx cap sync
npx cap open android

I could see that the voice recorder plugin was included in the project in Android Studio, however, when showData() method is called, VoiceRecorder is undefined and Plugins does not have the VoiceRecorder on it (I am running the Chrome remote device debugger to see console output).

I normally use the command: ionic capacitor run android -l --external to have live reload, if that makes any difference.

I’m new to mobile development, so I may be missing something obvious. Does anyone know why the voice recorder plugin is not accessible on the Plugins object?

Posts: 1

Participants: 1

Read full topic

↧

How get current internet speed in kbps or Mbps for ionic 4 angular 6 project

March 22, 2020, 4:23 pm
$
0
0

@arunRaj1986 wrote:

Hey guys ,

I’m developing a ionic 4 angular 6 web app (cards game).
i want to stop user action detecting slower internet i.e based on real time internet speed,

I have tried several ionic packages, but they detect only type of network.(ex 2g, 3g, 4g etc)
But i want the code which give real time internet speed like how how other apps detect slower internet.

If anybody cracked it out, will be be much useful.

Thank you

Posts: 2

Participants: 2

Read full topic

↧
↧

How to implement a "scroll reveal" effect in Ionic-Angular (v5) found on the ionic homepage

March 22, 2020, 4:36 pm
$
0
0

@sakotturi wrote:

I would like to implement the effect of showing certain elements/components based on the scroll position. This is similar to the https://ionicframework.com/ page which beautifully reveals elements using a delay and scroll position.

I’ve been able to reproduce something similar using ng-in-viewport but it’s nowhere near as cool as the ionic page.

template:

   <ion-card
      inViewport
      [inViewportOptions]="{ partial: true, threshold: [0.5] }"
      (inViewportAction)="onIntersection($event)"
      class="activateOnScroll"
    >

scss:

.activateOnScroll {
  opacity: 0;
  -webkit-transform: translateY(48px);
  transform: translateY(48px);
  transition: .4s opacity,.8s -webkit-transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95);
  transition: .4s opacity,.8s transform cubic-bezier(.07,.89,.79,.95),.8s -webkit-transform cubic-bezier(.07,.89,.79,.95)
}

.activateOnScroll.active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1
}

ts:

  public onIntersection({
    target,
    visible
  }: {
    target: Element;
    visible: boolean;
  }): void {
    this.renderer.addClass(target, visible ? 'active' : 'inactive');
    this.renderer.removeClass(target, visible ? 'inactive' : 'active');
  }

I don’t find that the renderer correctly captures these events. It does sometimes, misses them sometimes. I’ve got this wired up on a dozen components, it works on most of them, most of the time but it misses a lot.

My guess is that this is perhaps related to ion-content having it’s own scroll container? I’m guessing this because I’ve used ngx-scrollreveal on pure angular projects and it works great but doesn’t work with ionic projects https://github.com/tinesoft/ngx-scrollreveal

Maybe someone more familiar with the ionic homepage could show us how to do this within an Ionic Angular app?! I tried searching through the homepage source code but couldn’t see where the active class is being applied in js.

Posts: 1

Participants: 1

Read full topic

↧

Bug: using one checkbox or radio in an ion-alert converts all inputs to checkbox/radio

March 22, 2020, 6:15 pm
↧
Search

Issues with iPhone notch

March 22, 2020, 9:01 pm
$
0
0

@tkclark wrote:

Having issue with the not and my modal. Anybody know what I should be doing to fix?

Screen Shot 2020-03-22 at 11.58.14 PM
Screen Shot 2020-03-22 at 11.58.14 PM902×184 22 KB

I tried adding:

body{
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top);
}

but it isn’t helping. Oh, I also feel like the tab bar at the bottom needs some spacing as well. Any advice would be great!

P.S. I am using Ionic/Vue project. Might be outdated?

Posts: 1

Participants: 1

Read full topic

↧

How to pass radio button value to another page

March 22, 2020, 11:50 pm
$
0
0

@NthabyMogoboya wrote:

<ion-radio-group (ionChange)="radioChangeHandler($event)">

  <ion-list-header>

    <ion-label color="">

      Flavours

    </ion-label>

  </ion-list-header>

  <ion-item>

    <ion-label color="medium">Plain</ion-label>

    <ion-radio value="plain"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="success">Lemon&Herb</ion-label>

    <ion-radio value="Lemon&Herb"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="warning">Mild</ion-label>

    <ion-radio value="Hild"></ion-radio>

  </ion-item>

  <ion-item>

    <ion-label color="danger">Hot</ion-label>

    <ion-radio value="Hot"></ion-radio>

  </ion-item>

</ion-radio-group>

// .ts file

flavor: string;

radioChangeHandler(event: any){

this.flavor = event.target.value;

console.log(event.target.value);

}

Posts: 1

Participants: 1

Read full topic

↧
↧

Notification as a voice call app

March 23, 2020, 12:20 am
$
0
0

@doraeball22 wrote:

How to implement notification like a voice call in LINE, Messenger, WhatsApp or any voice call app? when anyone calls to you, it will show screen accept or reject even though the app runs on background mode. Currently, I implement notification using FCM https://capacitor.ionicframework.com/docs/guides/push-notifications-firebase/ it works but I want notification like incoming call then user accepts it will open some link with capacitor InAppBrowser. (the notification should have a sound for ringing about a minute and show screen) because of normal notification, it won’t work when the user leaves the phone.

Posts: 1

Participants: 1

Read full topic

↧

Remote databse driver

March 23, 2020, 12:49 am
$
0
0

@robyguglie wrote:

Hi! i’m trying to create an application and i need to interface with an mysql db, how can i connect to it using driver? i know i can use httprequest and php, but it’s not very secure, there is another way to do that?
thank you!

Posts: 1

Participants: 1

Read full topic

↧

XMPP strophe file transfer

March 23, 2020, 3:03 am
$
0
0

@etarom wrote:

Hi,
I am developing an ionic-cordova application with chat by Openfire.
I can’t get the strophe.si-filetransfer.js plugin to work
This the declaration in index, html:

  <script src="/assets/xmpp/strophe.si-filetransfer.js"></script>
  <script src="/assets/xmpp/strophe.ibb.js"></script>

and this in file .ts:

 import { Strophe } from 'strophe.js';
.......
.......

  this.connection.si_filetransfer.addFileHandler(self.fileHandler);
  this.connection.ibb.addIBBHandler(self.ibbHandler);

but connection.si_filetransfer’ and ‘connection.ibb’ are always ‘undefined’

i tried installing ‘npm strophejs-plugins’ but it doesn’t help

Can anyone help me?

Posts: 2

Participants: 2

Read full topic

↧
Viewing all 49526 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>