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

Passing data from one page to other page

$
0
0

@Omkar09 wrote:

I have local json data which I have subscribed to a property ‘jobs’. I am passing this property to other page using NavParams. On the other page I am receiving using get method of navparams. I am not able to assign this data to any property on other page. I want to display this data in html of other page. How do i do that?

This is my home page

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {ColorProvider} from '…/…/providers/color/color’
import { InfoPage } from ‘…/info/info’;
import { identifierModuleUrl } from ‘@angular/compiler’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public jobs: any;
constructor(public navCtrl: NavController,public ColorPr: ColorProvider) {

}

ionViewDidLoad() {

this.ColorPr.getLocalData().subscribe(data => {
      this.jobs = data;
       console.log(this.jobs);
    });

}

itemSelected(name){
this.navCtrl.push(‘InfoPage’,{jobs:name});
}

}

Home html



Names


{{job.name}}

Other Page
@IonicPage()
@Component({
selector: ‘page-info’,
templateUrl: ‘info.html’,
})
export class InfoPage {
public jobinfo: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
this.jobinfo = console.log(navParams.get(‘jobs’));
console.log(this.jobinfo);
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad InfoPage’);

}

}

Other page html

info This is info page

{{jobinfo}}

</ion-item>

Provider
import { HttpClient } from ‘@angular/common/http’;
import { Injectable } from ‘@angular/core’;
import {Http} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class ColorProvider {

constructor(public http: Http) {
console.log(‘Hello ColorProvider Provider’);
}

getLocalData() {
return this.http.get(’…/…/assets/data/adver.json’).map(res => res.json());

}
}

Posts: 1

Participants: 1

Read full topic


Do something when two future events are ready?

$
0
0

@DetectiveConan wrote:

I think this is more of a TypeScript question, but what is the best way to wait for two events? For example, you subscribe for the a UI component ready event and wait for a “then” for a REST API’s return.

Obviously, to display the data from the REST API on the UI component, both need to be ready. Naively, I thought of this, but is this the best?

  • On the UI component’s ready event, check if the data cache is ready. If so, display the data. Else, just set a variable “isUIReady” to true.
  • On the REST API’s “then”, check if “isUIReady” is true. If true, display the data. Else, cache the data to a variable.

Posts: 1

Participants: 1

Read full topic

App_id not generated

$
0
0

@jagationic wrote:

I generate a new ionic project for integration of google+, but when i switch to ionic.config.json file to get the app_id, i see that is blank.

So can any one say how to generate it or how to get the app_id of that project.

Posts: 1

Participants: 1

Read full topic

How to integrate google drive to upload files from my ionic app?

WKWebView not executing JavaScript in backgroud

$
0
0

@neoassyrian wrote:

Hi guys,

I’m pretty sure that WKWebView does not run any javascript calls when the app is running in background on iOS.

In my case, I have an audio player using the cordova media plugin. My app, can’t start a new audio if the app is running in the background on iOS (in a case of a playlist) .

How can we resolve this issue?
I’m also not sure if UIWebView had/has this issue. I’m yet to test.

Posts: 1

Participants: 1

Read full topic

VS Code, debug with live reload... possible?

$
0
0

@DetectiveConan wrote:

When I manually started it with the “–livereload” argument, when I changed a line and saved it, the change was reflected on the device in seconds. Now that I started it with VS Code’s Debug menu, live reload does not work. Is that possible?

In the launch.json, I used something like this (generated by VS Code, modified by me slightly.

    {
        "name": "Run android on device",
        "type": "cordova",
        "request": "launch",
        "platform": "android",
        "target": "device",
        "sourceMaps": true,
        "cwd": "${workspaceRoot}"
    }

Posts: 1

Participants: 1

Read full topic

CSS for Chrome, Android and IOS

$
0
0

@JAR19 wrote:

What browser targets do I need to include in css within Ionic?

Sorry - but this seems an easy question to answer - i.e. just code for all possible formats - but before I go through all my css and make the adjustments I just thought I check what the ideal solution is.

For example the following gradient generator produces:

/* IE10+ */
background-image: -ms-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Opera */
background-image: -o-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #cfe7fa), color-stop(100, #6393c1));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #cfe7fa 0%, #6393c1 100%);

/* W3C Markup */
background-image: linear-gradient(to right, #cfe7fa 0%, #6393c1 100%);

I seem to remember using an online css checker before - you enter the css and it would create all the possible variations. Spent a few hours looking for it but can’t find it.

Posts: 1

Participants: 1

Read full topic

Google Map-like sliding bottom sheet panel?

$
0
0

@DetectiveConan wrote:

I searched Google and found https://www.joshmorony.com/how-to-create-a-sliding-drawer-component-for-ionic-2/ but since it is a little bit old and there are some comments about problems, and it would take quite a lot of work to test it, I would like to know if it is the best option before applying it to my app. Or is there something similar in the framework itself? I could not find one. Clearly, Action Sheet is not something I want; I want the same thing as the sliding panel of Google Map.

I mean the following behaviours. They are long, but, in short, it is just how the bottom panel of Google Maps works.

  • When I need to display some data for a marker on the map, the panel needs to be docked at bottom.
  • When the user scrolls up on the panel, it gradually goes up to cover the whole page area. There is one slight difference. Since Google Map is not a tab-based app, the panel fills the entire screen. But my app is tap-based, so I want the panel contained inside the tab page. That is the panel should be above the tab bar, and when covering the screen, it should not cover the tab bar.
  • While the panel being scrolled up, the content of the panel should not be scrolled but only the panel grows up, just like Google Maps.
  • When it is filling the entire page area, there should be a <- (back button) to dismiss the panel. If the content on the panel is long, it should now be scrollable.

Posts: 1

Participants: 1

Read full topic


System sound crashing?

$
0
0

@ZiXXiV wrote:

Hi,

I’ve gota huge problem and can’t seem to fix it. Whenever I record sound using native mediaplugin, system sound seems to be crashing. I can’t volume up or down anymore, but the record is saved successfully.

The app is still functioning well after it, only I can’t play anything after my first record…

NOTE: In DevApp it works fine! -> Build IPA with IONIC makes this bug appear!

Please respond if you maybe know what it could be, I’ve been messing with this problem for over a week now and can’t seem to solve it.

Posts: 1

Participants: 1

Read full topic

Android: Input field not clickable

$
0
0

@fishi wrote:

Hi,

with Android it is not possible to set focus in field.
If you have a look also on the example page from ionic: https://ionicframework.com/docs/components/#floating-labels there it is also not working.

with iOS Setup:
http://recordit.co/9jsxgCR6Bn

with Android Setup:
http://recordit.co/B02r9ORpnS

So I can set the focus one times, you see it with the mouse “there I’m clicking” the focus comes not back.

The same behaviour I have of course also directly on the device.

I hope someone can help me.

Posts: 1

Participants: 1

Read full topic

Blank screen on ios

$
0
0

@mdline wrote:

Hello,

I got a blank screen when starting app on ios or from simulator, any idea?
Here the ouptut from xcode console

bjc[4951]: Class PLBuildVersion is implemented in both /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/AssetsLibraryServices.framework/AssetsLibraryServices (0x10de6f998) and /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/PhotoLibraryServices.framework/PhotoLibraryServices (0x10dbee880). One of the two will be used. Which one is undefined.
2017-12-04 21:26:59.297 xxx[4951:146985] Apache Cordova native platform version 4.4.0 is starting.
2017-12-04 21:26:59.298 xxx[4951:146985] Multi-tasking -> Device: YES, App: YES
2017-12-04 21:26:59.687 xxx[4951:146985] Using UIWebView
2017-12-04 21:26:59.689 xxx[4951:146985] [CDVTimer][handleopenurl] 0.146031ms
2017-12-04 21:26:59.695 xxx[4951:146985] [CDVTimer][intentandnavigationfilter] 4.414022ms
2017-12-04 21:26:59.696 xxx[4951:146985] [CDVTimer][gesturehandler] 0.000000ms
2017-12-04 21:26:59.696 xxx[4951:146985] CDVPlugin class CDVSplashScreen (pluginName: splashscreen) does not exist.
2017-12-04 21:26:59.697 xxx[4951:146985] [CDVTimer][splashscreen] 0.634968ms
2017-12-04 21:26:59.697 xxx[4951:146985] CDVPlugin class CDVStatusBar (pluginName: statusbar) does not exist.
2017-12-04 21:26:59.698 xxx[4951:146985] [CDVTimer][statusbar] 0.619948ms
2017-12-04 21:26:59.699 xxx[4951:146985] CDVPlugin class IonicKeyboard (pluginName: keyboard) does not exist.
2017-12-04 21:26:59.699 xxx[4951:146985] [CDVTimer][keyboard] 0.599027ms
2017-12-04 21:26:59.700 xxx[4951:146985] [CDVTimer][TotalPluginStartup] 10.594010ms
2017-12-04 21:27:02.740 xxx[4951:146985] Resetting plugins due to page load.
2017-12-04 21:27:04.173 xxx[4951:146985] Finished load of: xxx/Library/Developer/CoreSimulator/Devices/6EC37B07-8AE8-4D2D-BFE1-F499A1AB5D5A/data/Containers/Bundle/Application/5FAC0A9E-9D98-4325-ADE0-94124B9EDD82/xxx.app/www/index.html
2017-12-04 21:27:04.333 xxx[4951:146985] CDVPlugin class CDVDevice (pluginName: Device) does not exist.
2017-12-04 21:27:04.334 xxx[4951:146985] ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2017-12-04 21:27:04.335 xxx[4951:146985] -[CDVCommandQueue executePending] [Line 142] FAILED pluginJSON = ["Device1592708386","Device","getDeviceInfo",[]]
2017-12-04 21:27:04.359 xxx[4951:146985] CDVPlugin class CDVStatusBar (pluginName: StatusBar) does not exist.
2017-12-04 21:27:04.360 xxx[4951:146985] ERROR: Plugin 'StatusBar' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
2017-12-04 21:27:04.362 xxx[4951:146985] -[CDVCommandQueue executePending] [Line 142] FAILED pluginJSON = ["StatusBar1592708387","StatusBar","_ready",[]]

package.json

{
    "name": "XXX",
    "version": "XXX",
    "author": "XXX",
    "private": true,
    "config": {
        "ionic_webpack": "./config/webpack.config.js"
    },
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "lint": "ionic-app-scripts lint",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/common": "5.0.1",
        "@angular/compiler": "5.0.1",
        "@angular/compiler-cli": "5.0.1",
        "@angular/core": "5.0.1",
        "@angular/forms": "5.0.1",
        "@angular/http": "5.0.1",
        "@angular/platform-browser": "5.0.1",
        "@angular/platform-browser-dynamic": "5.0.1",
        "@ionic-native/core": "4.4.0",
        "@ionic-native/splash-screen": "4.4.0",
        "@ionic-native/status-bar": "4.4.0",
        "@ionic/storage": "^2.1.3",
        "@ngx-translate/core": "^9.0.1",
        "@ngx-translate/http-loader": "^2.0.0",
        "angular2-cookie": "^1.2.6",
        "cordova-android": "^6.2.3",
        "cordova-ios": "^4.4.0",
        "cordova-plugin-compat": "^1.1.0",
        "cordova-plugin-console": "^1.0.4",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-ionic-webview": "^1.1.11",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.0",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-sqlite-storage": "^2.0.4",
        "ionic-angular": "3.9.2",
        "ionic-logging-service": "^4.0.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "rxjs": "^5.5.2",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "^1.5.5",
        "@ionic/app-scripts": "^3.1.2",
        "typescript": "2.4.2"
    },
    "description": "An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-device": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {},
            "cordova-plugin-console": {},
            "cordova-plugin-statusbar": {}
        },
        "platforms": [
            "ios"
        ]
    }
}

config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="xxx" version="xxx" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>xxx</name>
    <description>To see deep in the sea</description>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <platform name="windows">
        <splash src="resources/windows/SplashScreen.scale-100.png" target="SplashScreen" />
        <splash src="resources/windows/SplashScreenPhone.scale-100.png" target="SplashScreenPhone" />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashScreenDelay" value="0" />
    <preference name="FadeSplashScreen" value="false" />
    <preference name="FadeSplashScreenDuration" value="0" />
    <preference name="windows-target-version" value="10.0" />
    <preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
    <allow-navigation href="http://*/" />
    <allow-navigation href="http://localhost:8100" />
    <engine name="ios" spec="^4.4.0" />
    <plugin name="cordova-plugin-console" spec="^1.0.4" />
    <plugin name="cordova-plugin-device" spec="^1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.0" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />
    <plugin name="cordova-sqlite-storage" spec="^2.0.4" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
</widget>

Posts: 1

Participants: 1

Read full topic

Updating ionic app - need to unistall old version?

$
0
0

@Vartex05 wrote:

Hi, i have a question, when i have already installed ionic app on my phone, then i made some changes and i want to update it. In which cases i have to unistall the app first and in which i dont have to? So far, i have found out, that if i generate apk from another computer, than before i have to unistall old app version first. Are there any rules this, i can rely on? So my customers doesnt have to unistall and install app any time i do update?

Posts: 3

Participants: 2

Read full topic

Problem with routing after switching to Lazy Loading

$
0
0

@auctores_csp wrote:

Hello Everybody,

I could not find anything similar on the net so I’m trying my luck here:

We are building a new Ionic app based on Version 3.9.2 of the framework. Starting out with normal loading pages everything worked just fine. Now we switched to lazy loaded pages. After some initial trouble I got everything working. Except the routing when switching pages:

I get a sporadic error “Uncaught Error: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:…” when switching pages, regardless of setting rootPage, popping from the nav-controller or pushing a new page. When looking at the URL in the browser-window then the segment part after the “#” is missing.
Unfortunately, this does not happen every time, it’s completely sporadic. I can switch the page several times and on the fifth, eight, random time the error occurs.
Interessting enough is, that the page actually is displayed correctly when I close the error message and the app behaves normally. Sometimes though, I’m thrown completely back to the first page of the app (the one that is set as root in the app.component.ts file).
Has anyone experienced similar problems?

Posts: 1

Participants: 1

Read full topic

Make condtion if else

$
0
0

@evilkidz wrote:

i have record, but i want to make condition… if my record is value null then show “Record not found” but if record is value true then “looping data”

Posts: 1

Participants: 1

Read full topic

Modal Controller

$
0
0

@DiegoOpenheimer wrote:

I have a modal that is a page that does not occupy a whole screen, it is small, I used it as modal, but when I click outside the modal it is not closing, someone can help.

Posts: 4

Participants: 3

Read full topic


1 radio-group for 2 lists of radio buttons behaves weird!

$
0
0

@cracker90 wrote:

hello,

is it possible to have 2 Lists of radio buttons but with 1 group, i tried to wrap them with a

<div radio-group>

    <ion-list >
		<ion-item>
			<ion-label>Go</ion-label>
			<ion-radio checked="true" value="go"></ion-radio>
		</ion-item>

		<ion-item>
			<ion-label>Python</ion-label>
			<ion-radio value="python" ></ion-radio>
		</ion-item>
	</ion-list>


    <ion-list >
		<ion-item>
			<ion-label>Go</ion-label>
			<ion-radio checked="true" value="go"></ion-radio>
		</ion-item>

		<ion-item>
			<ion-label>Python</ion-label>
			<ion-radio value="python" ></ion-radio>
		</ion-item>
	</ion-list>

</div>

but it has a weird behaviour, the second list of radio buttons seems to check the radio buttons on the first list!! is there a solution ?

Thank you!

Posts: 1

Participants: 1

Read full topic

Unable to use native plugin like bar code scanner and keychain Error Plugin not installed

$
0
0

@manjuagiliad wrote:

When i am trying to use native functionality (Bar code scanner and Keychain storage) using plugin, it is sending error Plugin not installed.
Although plugin is installed and it was working last weak.

any one help me to figure out this issue?

Posts: 1

Participants: 1

Read full topic

How to take Backup SQLite local DB and updated with Google Drive

$
0
0

@manivelponnusamy wrote:

Hi, Team

I want to take backup of local SQLite DB and upload to Google Drive. I have searched that how to take backup of local DB.
Can anyone please help me?

Thanks
Mani

Posts: 1

Participants: 1

Read full topic

How to use *ngif else when am getting empty values

$
0
0

@RajaJakkampudi wrote:

Am developing android application am getting data from service call am checking only “null”.

when data is empty i want to display “NA”.
(Issue is when data is empty html view is getting blank)

when data is present am showing data on html view

HTML Code below:


<ion-content padding class="no-scroll background">
	<ion-item class="showCompletedItem">
		<ion-label class="showCompletedLabel">Show Completed?</ion-label>
		<ion-checkbox item-right [(ngModel)]="showCompleted" (ionChange)="toggleShowCompleted()" class="showCompletedCB"></ion-checkbox>
	</ion-item>
	<ion-item class="proSelectDiv">
		<ion-label class="proSelectLabel">Please select a Pro</ion-label>
		<ion-select [(ngModel)]="currentPro" (ionChange)="handleProChange()">
			<ion-option *ngFor="let dispatch of dispatches; let i = index;" selected="{{(i==0).toString()}}">{{dispatch.division}}-{{dispatch.proNumber}} {{dispatch.shortDate}}</ion-option>
		</ion-select>
	</ion-item>
	<ion-grid class="proDateDiv">
		<ion-row sytle="margin-bottom: 5px;" *ngIf="currentDispatch != null">
			<ion-col col-2>Pro:</ion-col>
			<ion-col col-3>{{currentDispatch.division}}-{{currentDispatch.proNumber}}</ion-col>
			<ion-col col-2>Date:</ion-col>
			<ion-col col-5>{{formatDate(currentDispatch.dispatchDate)}}</ion-col>
		</ion-row>
	</ion-grid>

	<dispatch-detail *ngIf="detailInfoOne != null" #detailOne [detailInfo]="detailInfoOne" [index]="0" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoTwo != null" #detailTwo [detailInfo]="detailInfoTwo" [index]="1" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoThree != null" #detailThree [detailInfo]="detailInfoThree" [index]="2" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoFour != null" #detailFour [detailInfo]="detailInfoFour" [index]="3" (receivedClick)="handleChildClick($event)"></dispatch-detail>
	<dispatch-detail *ngIf="detailInfoFive != null" #detailFive [detailInfo]="detailInfoFive" [index]="4" (receivedClick)="handleChildClick($event)"></dispatch-detail>
</ion-content>

Posts: 1

Participants: 1

Read full topic

Ionic Storage cleared after Android Swipe To Close

$
0
0

@richardshergold wrote:

Experiencing some odd behaviour in our application which uses Ionic Storage

We’re using version 2.1.3 of Storage. On an Android device if we go to settings-apps and Force Close the app, the storage is retained when you re-start the app. But if you Swipe to close the app (from the recently opened apps button) and then re-start the app, storage has been cleared.

On iOS we get the expected behaviour (swipe to kill the app does not clear the storage).

Has anyone else experienced this?

Ionic Info:

cli packages: (/Users/richardshergold/IonicProjects/app/myApp/node_modules)

    @ionic/cli-utils  : 1.17.0
    ionic (Ionic CLI) : 3.17.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.2.3 ios 4.5.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    Node       : v6.11.4
    npm        : 2.15.12
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

Posts: 2

Participants: 1

Read full topic

Viewing all 49526 articles
Browse latest View live


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