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

How to reduce space around slides in ionic

$
0
0

@Kabilesh wrote:

I want to insert slides on top of a page and then several cards below that in ionic. The space above and below the slides are large. How to reduce this? I want the slides and cards outside slide to be close by. And also reduce the space around the slides. Is it possible? How to do it?

Home.html

<ion-header>
    <ion-toolbar color="primary">
      <button ion-button menuToggle (click)="presentPopover($event)">
       <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title>Home</ion-title>
   </ion-toolbar>
  </ion-header>

<ion-content padding>

  <ion-slides pager>
    <ion-slide>
      <ion-card>
       <ion-item>
         <ion-avatar item-start>
          <img src="assets/images/youtube.gif">
         </ion-avatar>
         <h2>Marty McFly</h2>
         <p>November 5, 1955</p>
       </ion-item>

      <ion-card-content>
        <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
      </ion-card-content>
    </ion-card>
  </ion-slide>

  <ion-slide>
      <ion-card>
       <ion-item>
         <ion-avatar item-start>
          <img src="assets/images/youtube.gif">
         </ion-avatar>
         <h2>Marty McFly</h2>
         <p>November 5, 1955</p>
       </ion-item>

      <ion-card-content>
        <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
      </ion-card-content>
    </ion-card>
  </ion-slide>
</ion-slides>

 <ion-card>
  <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

  <ion-card>
    <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

 <ion-card>
   <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

  <ion-card>
    <ion-item>
    <ion-avatar item-start>
     <img src="assets/images/youtube.gif">
    </ion-avatar>
    <h2>Marty McFly</h2>
    <p>November 5, 1955</p>
  </ion-item>

  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh...</p>
  </ion-card-content>
</ion-card>

How it looks like

Posts: 3

Participants: 2

Read full topic


How to use Analog time picker in ionic 2

How to disable side menu are some pages

$
0
0

@Madhawa wrote:

Im Used Ionic 3 for my university project, Im added side menu for my application

Side menu displayed all of project, but I want to disable menu option in some pages , How to disable in menu option

app.html

<!--------------------------------------Main Navigation--------------------------->

<ion-menu [content]="content" side="right">
  <ion-header>
    <ion-toolbar>
      <ion-title>List View</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content >
    <ion-list >
    <button menuClose ion-item *ngFor="let p of pages"[class.activeHighlight]="checkActive(p)" (click)="openPage(p)" > <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>


    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" ></ion-nav>
<!--------------------------------------Main Navigation--------------------------->

Thanks

Posts: 1

Participants: 1

Read full topic

Liveloard is not working

$
0
0

@ula wrote:

i am using ionic latest and my browser is chrome and vs code is the editor. when i change the ui or any code i am doing save all, but it’s not compile again. and program not change. what can i do for get liveloard.

Posts: 1

Participants: 1

Read full topic

Deploying apk to device problems - white screen of death and slow upload

$
0
0

@codiqa10004205 wrote:

  1. When installing signed apk - white screen of death.
  2. When installing regularly apk with debug - slow start of app.

2.WIth this definition running on the device -

 {
            "name": "Run Android on device",
            "type": "cordova",
            "request": "launch",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "ionicLiveReload": false,
            "devServerTimeout": 120000
        },

Slow upload but running on the device.
Meaning all the port forwarding is working.
How can I speed up the start?

  1. What i have done :

signed as described here - How to automatically sign android applications with the Ionic CLI

ionic cordova build android --prod --release --info --stacktrace --debug

building me a signed apk of 4mb.great. small.

I moved it manually to the device and installed , after removing the previous apk. Otherwise won;t install.

It is installed, stares and only shows white screen.
How can I see why , debug ,verbose?

Doesn’t show activity in chrome://inspect/#devices

My package.json

{
  "name": "",
  "version": "0.0.1",
  "author": "",
  "homepage": "",
  "private": true,
  "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": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/camera": "^4.3.2",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/device": "^4.0.0",
    "@ionic-native/diagnostic": "^4.3.2",
    "@ionic-native/geolocation": "^4.3.3",
    "@ionic-native/google-maps": "3.12.1",
    "@ionic-native/in-app-browser": "^4.3.2",
    "@ionic-native/native-storage": "^4.0.0",
    "@ionic-native/network": "^4.2.1",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/cloud-angular": "^0.12.0",
    "@ionic/storage": "2.0.1",
    "@ngx-translate/core": "6.0.1",
    "@ngx-translate/http-loader": "0.0.3",
    "@types/google-maps": "^3.2.0",
    "chart.js": "^2.7.1",
    "copyfiles": "^1.2.0",
    "cordova-android": "^6.4.0",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-compat": "^1.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-facebook4": "^1.9.1",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-googlemaps": "^2.1.1",
    "cordova-plugin-inappbrowser": "^1.7.1",
    "cordova-plugin-nativestorage": "^2.2.2",
    "cordova-plugin-network-information": "^1.3.3",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.2",
    "cordova-windows": "^5.0.0",
    "cordova.plugins.diagnostic": "^3.7.1",
    "font-awesome": "^4.7.0",
    "ionic-angular": "3.4.2",
    "ionic-native": "^2.9.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "node-sass": "4.3.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.1.2",
    "@types/googlemaps": "^3.26.20",
    "ionic": "3.19.0",
    "typescript": "2.3.3"
  },
  "description": "",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-statusbar": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-facebook4": {
        "APP_ID": "",
        "APP_NAME": ""
      },
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "..."
      },
      "cordova-plugin-network-information": {},
      "cordova-plugin-whitelist": {},
      "cordova.plugins.diagnostic": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "",
        "API_KEY_FOR_IOS": ""
      }
    },
    "platforms": [
      "browser"
    ]
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_copy": "./scripts/copy-custom-libs.js"
  }
}

my config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com...." version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>...</name>
    <description>...</description>
    <author email="..." href="...">...</author>
    <content src="index.html" />
    <access origin="*" />
    <access launch-external="yes" origin="tel:*" />
    <allow-navigation href="*" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <allow-navigation href="data:*" />
    <allow-intent href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <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="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="1000" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="1000" />
    <preference name="loadUrlTimeoutValue" value="90000" />
    <hook src="hooks/copy-fonts.js" type="after_prepare" />
    <platform name="android">
        <preference name="ShowSplashScreenSpinner" value="true" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
    </platform>
    <allow-navigation href=".." />
    <allow-navigation href="..." />
    <engine name="browser" spec="^4.1.0" />
    <plugin name="cordova-plugin-console" spec="^1.0.5" />
    <plugin name="cordova-plugin-device" spec="^1.1.4" />
    <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
    <plugin name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="" />
        <variable name="APP_NAME" value="" />
    </plugin>
    <plugin name="cordova-plugin-nativestorage" spec="^2.2.2" />
    <plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
    <plugin name="cordova-plugin-geolocation" spec="^2.4.3">
        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="" />
    </plugin>
    <plugin name="cordova-plugin-network-information" spec="^1.3.3" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.2" />
    <plugin name="cordova.plugins.diagnostic" spec="^3.7.1" />
    <plugin name="cordova-plugin-splashscreen" spec="^4.1.0" />
    <plugin name="cordova-plugin-googlemaps" spec="^2.1.1">
        <variable name="API_KEY_FOR_ANDROID" value="" />
        <variable name="API_KEY_FOR_IOS" value="" />
    </plugin>
</widget>
cli packages: (C:\Users\2bher\WebstormProjects\ionic3-angular4_2\node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.2.3 browser 4.1.0 windows 5.0.0
    Ionic Framework    : ionic-angular 3.4.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.4
    npm               : 3.10.10
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\2bher\AppData\Local\Android\sdk

Misc:

    backend : pro

Posts: 1

Participants: 1

Read full topic

[ionic 3.9.2] the correct typescript code breaks the ngc compiler

$
0
0

@anatolys wrote:

Hello!

I have upgraded to the latest ionic 3.9.2 and when I run android build with ionic cordova build android --prod --release I get:

Running app-scripts build: --prod --platform android --target cordova
[10:26:31]  build prod started ...
[10:26:31]  clean started ...
[10:26:31]  clean finished in 2 ms
[10:26:31]  copy started ...
[10:26:31]  deeplinks started ...
[10:26:32]  deeplinks finished in 547 ms
[10:26:32]  ngc started ...
[GTypeError: Cannot read property 'kind' of undefined
    at nodeCanBeDecorated (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:7805:35)
    at nodeIsDecorated (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:7825:16)
    at Object.nodeOrChildIsDecorated (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:7829:16)
    at isDecoratedClassElement (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51668:23)
    at isInstanceDecoratedClassElement (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51659:20)
    at Object.filter (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:1652:25)
    at getDecoratedClassElements (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51641:23)
    at generateClassElementDecorationExpressions (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51815:27)
    at addClassElementDecorationStatements (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51804:44)
    at visitClassDeclaration (H:\src\trunk\src\ionic\rms\node_modules\typescript\lib\typescript.js:51131:13)

I have investigated the problem and concluded that it is because of annotations like @Expose, @Type from https://github.com/pleerock/class-transformer :

export class Notification {
@Expose({ name: "notId" })
id: number;
@Expose({ name: "title" })
title: string;
@Expose({ name: "message" })
message: string;
foreground: boolean;
coldstart: boolean;
@Type(() => NotificationInfo)
info: NotificationInfo;
readed: boolean = false;
@Type(() => Date)
created: Date = new Date();
}

What should I change in my code to make the ngc compiler works?

project.json:

{
...
  "private": true,
  "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/deeplinks": "4.4.0",
    "@ionic-native/file-transfer": "4.4.0",
    "@ionic-native/http": "4.4.0",
    "@ionic-native/push": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "class-transformer": "^0.1.8",
    "cordova": "^7.1.0",
    "cordova-plugin-advanced-http": "^1.8.1",
    "cordova-plugin-device": "^1.1.7",
    "cordova-plugin-file": "^4.3.3",
    "cordova-plugin-file-transfer": "^1.7.0",
    "cordova-plugin-ionic-webview": "^1.1.16",
    "cordova-plugin-splashscreen": "^4.1.0",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.1.2",
    "ionic-angular": "3.9.2",
    "ionic-plugin-deeplinks": "^1.0.15",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "^3.0.0",
    "phonegap-plugin-push": "^2.1.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18",
    "cordova-android": "~6.3.0"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.2",
    "typescript": "2.4.2"
  },
...
    },
    "platforms": [
      "android"
    ]
  }
}

ionic info:

cli packages: (h:\npm\node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.9.2
    npm               : 3.10.10
    OS                : Windows 7

Environment Variables:

    ANDROID_HOME : h:\mobile\android\sdk

Misc:

    backend : pro

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

Disable click on alert controller

$
0
0

@sofianeee wrote:

Hii ,
I wanna disable click on alert controller when some condition are true
how to do it ?
Thanks

Posts: 2

Participants: 2

Read full topic

Is there a way to call Storage synchronously?

$
0
0

@kkoych wrote:

Hello, I am writing a service that consumes an API. The API requires a token be present on requests so that the user can be authenticated. Upon user login a token is given to the app which I store using the Storage module. Then I’m accessing it in all services which consume the API.

The problem is that the code which I’ve put in the constructor to load the token and id required for the authentication is asynchronous and so when the service is called it first executes the given method (getTask for example) and then the Token and Id get loaded in from the Storage module. So is there a way to wait for the token and id then start executing methods, or should I think of another way to do this?

Here is the constructor code:

constructor(private http: Http, private storage: Storage) {
        this.storage.get('token')
          .then(token => {
            console.log('Got token', token);
            this.headers.append('Token', token);
            this.storage.get('user')
              .then(
                user => {console.log('Got id', user.id);this.headers.append('Id', user.id)},
                error => console.error(error)
              );
          }, error => console.error(error));
    }

Posts: 1

Participants: 1

Read full topic


Calling a IonicModal on top of another IonicModal

$
0
0

@shijilesh wrote:

The usage of the $ionicModal service is explained here: https://ionicframework.com/docs/api/components/modal/ModalController/

I have a situation where it happens that I open more than two modals.

For example:

I first open a loginModal
In there, user clicks on a button “openSignUp()” which opens the SignUpModal

A model calling from another is not working ?

// opening loginmodal here
let profileModal = this.modalCtrl.create(loginModal, {
UserID:this.lsb_Userid,TRC:‘PO’ });
profileModal.onDidDismiss(data => {
if(data){
//
}
});
profileModal.present();

// opening signupmodal from loginModal and its not working

let profileModal = this.modalCtrl.create(Signupmodal, {
UserID:"",
TypeCode:‘AppBatch’,
Title:‘Signup’,
Param1Code: this.navParams.get(‘TRC’),
Param2Code: ‘NONE’,
Param3Code:‘NONE’,
Param4Code:‘NONE’,
Param5Code:‘NONE’,
Param6Code:‘NONE’,
Param7Code:‘NONE’,});

        profileModal .onDidDismiss(data => {
            if(data){

            }
        });

Posts: 1

Participants: 1

Read full topic

Location based notification in ionic

$
0
0

@Faizyfaazz wrote:

In my ionic project, i want a feature to show notification when a place reached. I used geofence to make it. but, when i was in that place the notification showing repeatedly. futures: 1.if i install the app,when i reached the position(already added),the notification must come.(background checking)


Observable.interval(100 * 60).subscribe(x => {
      this.addGeofence();

     });
................
............
 private addGeofence() {
    //options describing geofence
    let fence = {
      id: '69ca1b88-6fbe-4e80-a4d4-faizy4d3748acdb', //any unique ID
      latitude:       8.556498, //center of geofence radius
      longitude:      76.881820,
      radius:         100, //radius to edge of geofence in meters
      transitionType: 1, //see 'Transition Types' below
      notification: { //notification settings
        id:             121212122, //any unique ID
        title:          'You crossed a fence', //notification title
        text:           'You just arrived to white oval technology.', //notification body
        openAppOnClick: true //open app when notification is tapped
      }

    }

Posts: 1

Participants: 1

Read full topic

Error "Can't resolve all parameters for provider"

$
0
0

@ThunderBirdsX3 wrote:

I got an error Can't resolve all parameters for OneProvider: ([object Object], [object Object], ?),

When import provider from both side.

First one.

import { Injectable } from '@angular/core';
import { TwoProvider } from '../two/two';

@Injectable()
export class OneProvider {
  constructor(private two: TwoProvider) {}
}

Other one.

import { Injectable } from '@angular/core';
import { OneProvider } from '../one/one';

@Injectable()
export class TwoProvider {
  constructor(private one: OneProvider) {}
}

What can I do?

Posts: 4

Participants: 3

Read full topic

Save .jpg to device gallery

$
0
0

@felix9607 wrote:

Hey Guys,

I want to save.jpg files to the device’s photo Gallery with Ionic 3.

Sadly I couldn’t find a way to save it directly.

Instead of saving the file directly I thought about Encoding it to Base64 String and the use the plugin to save it to the gallery. Sadly I couldn’t encode it to Base64. I already tried some stuff (Canvas, FileReader…) from the Forum but nothing really worked in my case, because functions were unknown or anything else.

do you guys have any suggestions? Thank you very much.

Related : StackOverflow

Posts: 1

Participants: 1

Read full topic

Creating a common header element for ionic app throws error in --prod build

Ionic 3 how to add tawk chat

$
0
0

@puujee wrote:

<body>
...............
.
............
..............
<!--Start of Tawk.to Script-->
 <script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
 var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5968515a6edc1c10b0345ef8/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
 s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</body>

ionic cordova emulate android --livereload work

ionic cordova emulate android not working

what to do

Posts: 1

Participants: 1

Read full topic

Login check, promises and Storage

$
0
0

@rafarco wrote:

Hello,

After solving some issues with server communicastion and HTTPClient, now I have another problem checking if users are logged in. The code is:

  login(username, password) {
    this.loginService.login(username, password);
    if(this.loginService.isLoggedIn) {
      this.nav.pop();
    }
  }

  get isLoggedIn(): boolean {
    this.ok = false;
    this.storage.get('user').then(userdata => {
      this.user = userdata;
      this.storage.get('token').then(
      tokdata => {
        this.tok = tokdata;
        if(this.user != null && this.tok != null) {
          const body = {user: this.user, token: this.tok, check: 1};
          this.http.post(this.loginUrl, body)
          .subscribe(data => {
            let output = data['output'];
            this.ok = (output == 'OK');
            return this.ok;
            });
          }
        });
      });
    return this.ok;
  }
}

However, due to the asynchronous nature of promisess, isLoggedIn always return false and the login screen never removed. I’m also aware that I’m nesting promises, which I read is not the best practice. I checked a few links on asynchronous functions and Javascript but I’m still unable to find a solution. Any help is appreciated.

Posts: 1

Participants: 1

Read full topic


After record, sound bugs / is stuck. (iOS)

$
0
0

@ZiXXiV wrote:

Since I’ve been answered pretty quickly last time. I’ve got another question I’d like to get solved as I don’t seem to find anyone else having the same problem. (or google just messes with me again).

I basically use this as recording.

I’ve got an event on touchstart and touchend to hold a button while recording. Works fine. Records fine, pushes fine to my server and everything.

The problem is (this only exists on debug ipa file builded by ionic) it doesn’t want to playback any sounds after I’ve recorded the first time. I’ve tried releasing it, but dosen’t make any difference. This problem does not accur when using the Ionic DevApp or Ionic View. Only on the debug IPA I’ve build through ionic.

When I’ve recorded my first record, go back to a livestream, press play and keep playing with my volume up and down buttons, I see the bar moving. After it connected to the stream, even that stops functioning. I can record many times and the app is still responding. Only I can’t modify or play any of my sounds anymore. Sound plays normally whenever I don’t record anything at all so its definitely related to the MediaPlugin somehow?

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

Ionic + AWS Amplify?

$
0
0

@Sujan12 wrote:

Amazon released a new library:


https://news.ycombinator.com/item?id=15751713


It is somewhat focused on React Native, but also offers a plain JS API that could probably be leveraged in an Ionic app.

Anyone played with it already?

Posts: 1

Participants: 1

Read full topic

Button click color

$
0
0

@dipankar123 wrote:

hi guys,
have one question
i hv a button in side menu to show/hide a div
now i want to change its color on click
here is my html

<button menuClose ion-item (click)="door()"> Door </button>
<button ion-item (click)="showMovementReport()" [ngStyle]="{'background-color': buttonColor}"> Get Movement Report </button>
      <div *ngIf="toggled" >
          <button style="background-color:rgb(0, 124, 0)" *ngFor="let item of getMovementPages" ion-item no-lines> {{item.title}} </button>
      </div>

on click showMovementReport() function its shows/hide this div
i want to change the button color:
if div shows( on click showMovementReport()) then change color to orange
or
if div hides( on click showMovementReport()) then remove orange color/ or back to previous color
my button color changed when div shows but not changing if div hides
here is ms ts code:

toggled: boolean;
buttonColor: string;

showMovementReport() {
    this.buttonColor = '#345465';
    this.toggled = this.toggled ? false : true;
  }

Posts: 1

Participants: 1

Read full topic

Embed a website in Ionic 3

$
0
0

@julprz wrote:

Hello everyone,
I’m actually trying to port my website into a Android app for a school project which is already up on the web. I would like to do it only by iframing my website url (I already did it in responsive design). I’ve read many tutorials online and I’m not able to do it I keep getting errors when i use

Thanks for your help ! :grinning:

Posts: 1

Participants: 1

Read full topic

Https with Basic Auth failing on IOS only

$
0
0

@MrShakes wrote:

Firstly, if you’ve encountered this problem before you may be thinking, add NSAppTransportSecurity, already done that, added in config.xml and even created a hook in after_prepare for it as follows:

#!/bin/bash

PLIST=platforms/ios/*/*-Info.plist

cat << EOF |
Add :NSAppTransportSecurity dict
Add :NSAppTransportSecurity:NSAllowsArbitraryLoads bool YES
EOF
while read line
do
    /usr/libexec/PlistBuddy -c "$line" $PLIST
done

true

It’s failing with this error:

{"_body":{"position":0,"totalSize":0},"status":0,"ok":false,"statusText":"","headers":{},"type":3,"url":null}

This is the code, same exact code works on Android and Web:

  let path = "https://us11.api.mailchimp.com/3.0/lists/xxx";
  let body = {"members": [{"email_address": email, "status": "subscribed"}], "update_existing": true};
  let headers = new Headers ({
    'Authorization': 'Basic T2xhOmNlN3R4N2I4MjQyMDg6UmU0MWQ0NDNiNjk2NTg1MjJjYHSzMTE='
  });
  let options = new RequestOptions({headers: headers});
  this.http.post(path, body, options)
    .map(res => res.json()).subscribe(data => {
       console.log(data);
    },
      err => {
       console.log(err);
    })

What could I be doing wrong please?

System:

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

@ionic/cli-utils  : 1.9.2
ionic (Ionic CLI) : 3.9.2

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3 ios 4.4.0
Ionic Framework    : ionic-angular 3.7.1

System:

ios-sim : 5.0.8
Node    : v6.10.2
npm     : 3.10.10
OS      : macOS Sierra
Xcode   : Xcode 8.3.3 Build version 8E3004b

Posts: 1

Participants: 1

Read full topic

Viewing all 49109 articles
Browse latest View live


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