Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70919 articles
Browse latest View live

Blog Post: "Ionic: 2017-18 Roadmap"


Preload-image tag [ratio]

$
0
0

@kemety wrote:

I searched the documentation and google for the preload-image tag documentation and could not find it. What I am trying to achieve is to change the [ratio] - which is currently [ratio]="{w:2, h:1.5}" to the normal/original size of the image when the user clicks on the image. Is that possible?

Posts: 1

Participants: 1

Read full topic

Using non ionic cordova plugins properly

$
0
0

@dinomight wrote:

So i’ve been able to import plugins from @angular/ and @ionic-native and ionic-native, but i have a plugin i’ve added to my project and i can’t use import statements for it (it fails linting as well as crashes the app). The plugin in question is cordova-plugin-bluetoothle. Now please don’t tell me to just use ‘@ionic-native/ble’ it doesn’t offer all of the functions i need. I need to figure out the process of adding and using plugins that are not ionic-native.

first i tried:

import { bluetoothle } from 'cordova-plugin-bluetoothle';

I wish it had been so easy as to include it the same way other ionic plugins are accessed. oh to preface i added the plugin using

ionic cordova plugin add cordova-plugin-bluetoothle

And that does in fact download and install the plugin into the plugins folder.
Ok so my code completion (vscode) does infact find the plugin and will autocomplete “cordova-plugin-bluetoothle” while coding the import statement, and while it cc it fails linting. I found that adding

declare module 'cordova-plugin-bluetoothle'

to my declarations.d.ts file in src/ passes linting and autocompleting to the bluetoothele variable’s functions work. But the app still fails. I really thought i had it. so scouring the web i cam across: https://www.javascripttuts.com/ionic-3-and-cordova-native-plugins-installation/
which seemed to be what i wanted. i declared cordova in my declarations file, then in my code i was able to use `

console.log(cordova);
console.log(cordova.plugins);
this.bluetoothle = cordova.require('cordova-plugin-bluetoothle');

cordova seems to be there and for some reason 2 plugins are already loaded (seen from the console.log(cordova.plugins) ) I can’t seem to find where these plugins got loaded (if i could i would probably use the same code to load the ble plugin.)
Problem is the cordova.require throws a “module cordova-plugin-bluetoothle not found” error.
I’m just really confused the proper way to use non core ionic plugins. I’ve tried changing the plugin name in code in case i got it wrong i’ve checked the plugin code to see if it used some other name/id and from what i can tell everything looks good. What am i doing wrong. I’m really in a bind here.

And again, no i can’t use the @ionic-native/ble plugin. Yes it does work for me if i use it, it just doesn’t have all of the functions available in this other cordova plugin, and i need those functions. the ionic-native/ble is very paired down :frowning: in case you need to know the url to to the plugin repo is https://github.com/randdusing/cordova-plugin-bluetoothle

Please someone save me. I’m going to keep hacking away but i’m sure someone knows exactly how to do this. I only pray they watch the forums.

Posts: 1

Participants: 1

Read full topic

How to handle keyboard event globally in a single place

$
0
0

@emiljenson wrote:

In my app, the keyboard hides most of the data in the page. In android there is a back button to hide keyboard. but in ios it does not have an option to hide…

So what am aiming for is , whenever the user clicks the ‘Go’ button in the keyboard, the keyboard has to close. Can somebody help me achieve this ?. It would be better if i could write the code for this globally so that it gets affected in every page…

Posts: 1

Participants: 1

Read full topic

Close an ionic tab

$
0
0

@vikceo wrote:

i have a design where i am have tabs created on the fly. I am doing that using a ngFor in tab as below:

  <ion-tabs name="dynTabs" tabsPlacement="top" tabsLayout="icon-end">
                <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="{{tb.tabIcon}}" (ionSelect)="onTabActive($event)"></ion-tab>
          </ion-tabs>

The core.dynamicTabs is a shared array containing info for individual tabs. First tab is added in the array when user visitng this page containing the tabs as follows:

this.core.dynamicTabs.push({"pageName": OptyListPage, "tabTitle" : "Opportunities", "optyId": "", "tabIcon":"" });

From the OptyListPage there is a button to add more tabs on the fly. the code looks like below:

createTab(rw){
      this.core.dynamicTabs.push( { "pageName": EditOptyPage, "tabTitle" : rw.name, "optyId": rw.OptyId, "tabIcon":"close" });
     this.event.publish('new-tab-launched', this.core.dynamicTabs.length -1 );

This all works great. The EditOptyPage has a close button to close these tabs. The code looks like:

close(){
     this.core.dynamicTabs.splice(this.currentTab,1)
}

However, doing this does not really remove the tab. It actually removes the page it seems. Please advise.

Posts: 1

Participants: 1

Read full topic

How to install leaflet-locatecontrol plugin

Google releases Adnroid Studio 3.0, you should probably NOT upgrade yet (as Cordova is not ready yet)

$
0
0

@Sujan12 wrote:

See here:

Cordova devs had this to say just now in Slack:

Don’t update to Android Studio 3.0 or use the latest Android Gradle plugin, it will break your build and Cordova will not compile.
We are working on yet another fix for this issue, and there will be a 6.4.0 release for it soon, but as of right now, stick to the old version of Android Studio
BTW: If you do update your Android Studio and your Android Studio offers to upgrade your Gradle plugin, always say no

So who updates anyway and tells us how it breaks?

Posts: 1

Participants: 1

Read full topic

Long Boot Time for Ionic 1 Application

$
0
0

@shivkumarganesh wrote:

We have an application which is entirely build using Ionic 1 and ES6 along with Babel and Webpack. The problem is that application’s Boot time is very slow. It almost takes 10 to 12 seconds to and the app is stuck in the Splash Screen until that time. I have tried everything possible but nothing changed. On the other hand I see that platform.ready takes like forever to load. It almost takes 10 seconds. I don’t want to change the framework to 2 and above. Is there some way in which we can optimize it? Even few Seconds of Optimization can save things for us.

Posts: 2

Participants: 2

Read full topic


How to decorate marker in Google Maps

$
0
0

@abpatola wrote:

Hi, I am trying to display the event name for each event location from a parsed JSON file. I am unsure how to do this and have only been able to display a simple string such as “test”. Right now with the code I have it shows a blank info window and I am unsure why. Any help is appreciated on how to display the eventName for each event. Thanks!

My marker/info window functionality:

getMarkers(){
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{
this.addMarkersMap(data);
  });

}

addMarkersMap(markers){
for(let marker of markers)
 {
var loc = marker.calEvent.locations[0]['coords'];

  console.log(loc);


  marker = new google.maps.Marker({
   position: loc,
  map: this.map,

    });


  var infoWindow = new google.maps.InfoWindow({
   content: markers.eventName

});

google.maps.event.addListener(marker, 'click', function () {
  infoWindow.open(this.map, marker);
 });

}
}

Posts: 1

Participants: 1

Read full topic

Image upload to Amazon S3 with Ionic

$
0
0

@jicee13 wrote:

Hi guys. I’m trying to implement an image upload feature in my Ionic app that talks to Amazon s3. I don’t need help with the camera feature or the ionic native things, I just need guidance on getting it hooked up to Amazon s3. I’ve looked through the Javascript SDK and got confused. I like the aws-starter kit they just released, but its resource overkill for what I’m trying to do.

Anyone have any tutorials or tips on integrating Amazon s3 with Ionic?

Posts: 1

Participants: 1

Read full topic

In Android 4.4.2 problem with sidebar

$
0
0

@jardim_lima wrote:

Hello , i have a problem in my ionic app , I have a class in my html tag:

and when I make a change in my app it changes the class of my html so I can have custom css

I Do that in my controller:
$rootScope.themeName = theme_name;

so that line is causing me a problem in my sidebar only in a specific version in android(4.4.2) , in other version it works well

the problem it causes is that my sidebar is closing alone.

Ionic version: 1.7.16
cordova: 6.4.0
Cordova android version: 5.1.1
Android version that happens the problem: 4.4.2

Posts: 1

Participants: 1

Read full topic

Admobfree isn't working

$
0
0

@anna_liebt wrote:

Hello, sometime ago I made a short test with admobfree plugin. It worked : Now I would do it again and the same code isn’t working.

So I set up a new project and it wasn’ t working too.
The code depends on https://www.joshmorony.com/integrating-google-admob-advertisements-in-ionic/

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { AdMobFree } from '@ionic-native/admob-free';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.

    <button ion-button (click)="showBanner()">Show Banner</button>
    <button ion-button (click)="launchInterstitial()">Show Interstitial</button>
  </p>
  <p>result Banner: {{bannertext}} </p>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public admob: AdMobFree) {

  }

bannertext:string = '';

  showBanner() {

           let bannerConfig: AdMobFreeBannerConfig = {
               isTesting: true, // Remove in production
               autoShow: true
               //id: Your Ad Unit ID goes here
           };

           this.admob.banner.config(bannerConfig);

           this.admob.banner.prepare().then(() => {
               this.bannertext =  'bannertext success';
           }).catch(e => this.bannertext =  'bannertext e:' + e);

       }

       launchInterstitial() {

               let interstitialConfig: AdMobFreeInterstitialConfig = {
                   isTesting: true, // Remove in production
                   autoShow: true
                   //id: Your Ad Unit ID goes here
               };

               this.admob.interstitial.config(interstitialConfig);

               this.admob.interstitial.prepare().then(() => {
                this.bannertext =  'interstitial success';
              }).catch(e => this.bannertext =  'interstitial e:' + e);

           }
}

No Errors in visual code ide, no errors on ionic cordva build android. this.bannertext shows sucess, but I have no banner ad or interstital ad.
So what is wrong with this code?

Best regards, anna-liebt

Additional

ionic info

cli packages: (C:\Users\admin\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.14.0
ionic (Ionic CLI) : 3.14.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1

System:

Node : v6.11.0
npm  : 3.10.10
OS   : Windows 10

Misc:

backend : legacy

Posts: 1

Participants: 1

Read full topic

Blank white screen on running ionic cordova app on a windows 10 device

$
0
0

@pinaka wrote:

Current behavior:

I have deployed an ionic app to a windows 10 surface pro using visual studio 2017 build option. On starting the app, a blank white screen shows up and the app is stuck without proceeding further.
Expected behavior:

I would expect the app to start normally as its happening without any issues in other platforms. have deployed the same app on Android device ( Android phone and tablet ) and Apple device ( IPAD )
Steps to reproduce:

Did a git clone of my repository on the actual device where I have installed the app.
Installed all dependencies ( node, npm install, visual studio 2017 installed )
Ionic Cordova add platform windows
Then launch Visual studio 2017 to open the .vs2013.sln file, create app package and run the Add-AppDevPackage in windows PowerShell to install the app on the device.
Try to run the app. The app gets stuck at this point. If I try to serve it locally on the windows device, it works fine. However, the actual app doesn’t run as expected.
Could you please provide some pointers to help fix this issue as we have chosen the Ionic framework for a POC and have to demo the use of this framework on all platforms. Its working fine on Android and IOS devices.

Ionic info

@ionic/cli-utils : 1.14.0
ionic ( Ionic CLI ) : 3.14.0

global packages:
cordova ( Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platform : windows 5.0.0
Ionic Framework : ionic-angular 3.6.1

System:

Node: v6.11.4
npm: 3.10.10
OS: Windows 10

Misc:

backend:pro

Posts: 1

Participants: 1

Read full topic

URGENT build failed after gradle dependencies update

$
0
0

@lalogrosz wrote:

Hi, I recently ran the command “ionic cordova run android” and gradle tried to download some dependecies:

Incremental java compilation is an incubating feature.
Download https://maven.google.com/com/android/support/support-v4/27.0.0/support-v4-27.0.0.pom

Download https://maven.google.com/com/android/support/customtabs/27.0.0/customtabs-27.0.0.pom

Download https://maven.google.com/com/android/support/support-compat/27.0.0/support-compat-27.0.0.pom

Download https://maven.google.com/com/android/support/support-media-compat/27.0.0/support-media-compat-27.0.0.pom

Download https://maven.google.com/com/android/support/support-core-utils/27.0.0/support-core-utils-27.0.0.pom

Download https://maven.google.com/com/android/support/support-core-ui/27.0.0/support-core-ui-27.0.0.pom

Download https://maven.google.com/com/android/support/support-fragment/27.0.0/support-fragment-27.0.0.pom

Download https://maven.google.com/com/android/support/support-annotations/27.0.0/support-annotations-27.0.0.pom

Download https://maven.google.com/com/android/support/support-annotations/27.0.0/support-annotations-27.0.0.jar

Download https://maven.google.com/com/android/support/support-compat/27.0.0/support-compat-27.0.0.aar

Download https://maven.google.com/com/android/support/support-media-compat/27.0.0/support-media-compat-27.0.0.aar

Download https://maven.google.com/com/android/support/support-core-utils/27.0.0/support-core-utils-27.0.0.aar

Download https://maven.google.com/com/android/support/support-core-ui/27.0.0/support-core-ui-27.0.0.aar

Download https://maven.google.com/com/android/support/support-fragment/27.0.0/support-fragment-27.0.0.aar

Download https://maven.google.com/com/android/support/support-v4/27.0.0/support-v4-27.0.0.aar

Download https://maven.google.com/com/android/support/customtabs/27.0.0/customtabs-27.0.0.aar

After that, at the end the build fails with this message:

ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:font
ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:fontStyle
ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:fontWeight


FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> com.android.ide.common.process.ProcessException: Failed to execute aapt

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

[ERROR] An error occurred while running cordova run android (exit code 1).

I tried to find a solution but I didn’t find any post with this.
Any idea???

HELP PLEASE!

Posts: 3

Participants: 3

Read full topic

How to make Dynamic data using as responsive

$
0
0

@Phanitechie wrote:

here im facing a issue related ion-col , i am binding my dynamic data to the ion - row and display data in the ion-col here the table is huge and it is cutting off and widths of that unstable below is my code

<ion-grid class="contnr">
      <ion-row style="" class="grid-head">
        <ion-col width-40>
          Transaction
        </ion-col>
        <ion-col width-40>
          Count
        </ion-col>
        <ion-col width-40 >
         Overall  Gross Amount
        </ion-col>
        <ion-col width-40 >
          Overall Disc
        </ion-col>
        <ion-col  width-40>
          Overall Tax
        </ion-col >
        <ion-col  width-40>
         Overall ServiceTax
        </ion-col>
        <ion-col  width-40>
         Overall Charge
        </ion-col>
        <ion-col  width-40>
          Overall Net
        </ion-col>
      </ion-row>
      <ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows">

        <ion-col width-40>
          {{value.TransacType}}
        </ion-col>
        <ion-col width-40>
          {{value.Transactions}}
        </ion-col>
        <ion-col width-40>
          {{value.Count}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallSales}}
        </ion-col>
        <ion-col width-40>
          {{value.Discount}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallTax}}
        </ion-col>
        <ion-col width-40>
          {{value.MandatoryTax}}
        </ion-col>
        <ion-col width-40>
          {{value.ServiceCharge}}
        </ion-col>
        <ion-col width-40>
          {{value.NetAmt}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>

        <ion-col>
          {{grossTotal}}
        </ion-col>
        <ion-col>
          {{Nets}}
        </ion-col>

      </ion-row>
    </ion-grid>

here the problem the table is so long that it is cutting off and even though im setting of using scss but the col and col data is not getting in properly aligning

Posts: 3

Participants: 2

Read full topic


Lost body data when using angular http.post in WKWebview

Code changes are not reflected after a live reload - ionic serve

Help with development setup on OpenSUSE Tumbleweed

$
0
0

@jiotaro wrote:

Here is my situation:

Got node/npm installed, along with latest ionic/cordova,
also installed android-studio with sdk, build tools, and a separate gradle
(somehow the bundled gradle in android-studio cannot be regconized)

but when I run my project, it keeps saying I’m missing Android build tool
(one more thing is that installed commands also cannot be found, like sdkmanager or adb)

anyone here got the solution?

I have been looking for it but got nowhere… :frowning:

Posts: 1

Participants: 1

Read full topic

Ionic cordova platform add android fails to generate android platform properly

$
0
0

@sirsaula wrote:

For some reason when i run “ionic cordova platform add android” it never generates the gradlew.exe and gradle folder you would normally see in this structure which then causes my ionic build android and ionic run android to subsequently fail. Any ideas what is going on?

Attached is a pic of the folder i get generated you will see gradlew.exe and gradle folder is missing Picture of incomplete folder (Click here)

Laptop-MBP:Ionic3 myLaptop$ ionic info

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.1
ionic (Ionic CLI) : 3.15.1

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.0
Cordova Platforms  : android 6.3.0 ios 4.3.1
Ionic Framework    : ionic-angular 3.5.3

System:

Android SDK Tools : 24.3.4
ios-deploy        : 1.9.1
ios-sim           : 5.0.13
Node              : v6.9.4
npm               : 3.10.10
OS                : OS X El Capitan
Xcode             : Xcode 8.2.1 Build version 8C1002

Environment Variables:

ANDROID_HOME : /Users/laptop/Library/Android/sdk

Misc:

backend : pro

Posts: 1

Participants: 1

Read full topic

Node security patch released

Viewing all 70919 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>