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

Newbie Question about IONIC App

$
0
0

@Tbcomputerguy wrote:

Hello everyone, i come from the filemaker world and want to move on. We have created a little app to look after displaying a schedule of dances for a competition. here is a screen shot: http://www.tbcguy.com/dvpro/theviewlist.PNG. Now FMPro runs only IOS (iphone) for mobile devices. We could use web direct for android devices but that involves AWS or other server means. Or we need a server and tons of client licences. At any rate this is an app that has static data, display only…no user intervention apart from searching. There could be changes in the dance categories, times etc. But, that is controlled by someone in the backend. Right now we have it set up to use google sheets. The app checks to see if there are changes in the data, if so do an update and notify the user. Also if you notice, at the bottom above the menu bar there is a current dance. That is schedule based meaning it checks the current time and compares it to the data and displays the current dance. If there are discrepancies, which there are like falling behind or it runs smoothly and gets ahead. we can adjust that on another screen. I would like to move away from filemaker if possible and do this another way and this Ionic framework looks really slick. My hope is to design this in this framework. Using Appscript from google I have a firebase database set up that is synced to the google sheet. I am hoping that this framework can tie into Firebase realtime and display the data similar to the screen shot. Then my data on the phone will be updated all the time.

That brings me to my question. Is this possible using the IONIC / angular framework. I have basic programming skills…again a database guy. But looking at some of the tutorials for this, it looks manageable and I am up for the challenge as well.

Thanks for your time.

Dave

Posts: 1

Participants: 1

Read full topic


PDF download approach

$
0
0

@kannrame wrote:

Hi I am new and looking for a reference to know the correct way to call Rest API and download PDF in android.
I tried FileSaver.saveAs function but it worked in from browser but not in mobile app. Appreciate your help.

Posts: 1

Participants: 1

Read full topic

Store Firebase data locally on phone

$
0
0

@obinnae wrote:

Hi, I need to get records from Firebase and store them locally in my Ionic 3 app such that every time I open the app, it checks Firebase for changes and updates the local one if need be. It needs to be listening for changes even when the app is closed. Kinda like an email app (when you open an email app, all the previous messages are already there - no need to redownload from the server - and is updated when new messages arrive).

Right now, every time I load the app, it pulls fresh data from Firebase, and when I navigate to a different page and return, it does a fresh pull of data. I’d rather it get all the data one time and store locally, only updating when there’s a change. It should also be listening to Firebase for changes.

How do I achieve that?

Thanks.

Posts: 1

Participants: 1

Read full topic

Ionic 3 not rebuilding on file change

$
0
0

@semanticnet wrote:

Am starting a new project on ionic version 3.20

Every time I update a file, the web page isn’t refreshing/rebuilding, where it suppose to live reload on “localhost:8100”. So am stopping ionic and run “ionic serve” again on every update.

Although when i refresh the web page (localhost:8100) the page is reloading till infinity.

I have uninstall cordova and ionic, and still same issue.

Any solutions please?

Posts: 1

Participants: 1

Read full topic

theming inside shadow dom - v4

$
0
0

@Pdriessen wrote:

Hi All,

I’m facing some problems with theming ionic components (v4) and shadow DOM. In my ionic-pwa from stencil I even don’t get it to work.

For example:
<ion-button fill="solid" expand="full" color="success">Success</ion-button>

Without shadow DOM enabled this results in a success button as expected.
With shadow DOM enabled, the ion-color-base variable doesn’t seem to point to the success color.

To reproduce it:

  1. Install https://github.com/ionic-team/ionic-pwa-toolkit
  2. Go to this file: https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/src/components/app-home/app-home.tsx
  3. add ‘shadow: true’ after rule 5.
  4. add ‘color=“success”’ to the ion-button

Regards, Peter

Posts: 1

Participants: 1

Read full topic

Creating Interactive graphics

$
0
0

@JohnCressman wrote:

I am trying to create an interactive graphic on one of my pages that will allow me to click on a body part and it will toggle a value behind the scene and then also toggle a fill effect (filled if selected, not fill if unselected). (See the attached example)

Can anyone point me in the right direction?

Posts: 1

Participants: 1

Read full topic

Package build for ios fails Source path does not exist: resources\ios\icon\icon-1024.png

$
0
0

@lautarolorenz wrote:

ionic cordova platform remove ios
ionic cordova platform add ios

works on local, but fails on HUB, with error

Exit status of command 'cordova platform add ios' was 1 instead of 0.
Using cordova-fetch for cordova-ios@5.0.1
Adding ios project...
Creating Cordova project for the iOS platform:
	Path: platforms/ios
	Package: com.example.app
	Name: MiAppName
iOS project created with cordova-ios@5.0.1
Source path does not exist: resources\ios\icon\icon-1024.png

Ionic:

Ionic CLI : 5.0.1 (C:\Users\coco\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.8.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.3.0
native-run : 0.2.3

System:

Android SDK Tools : 26.1.1 (C:\Users\coco\AppData\Local\Android\sdk)
NodeJS : v10.0.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

How i get Data from Json Object

$
0
0

@MrTob wrote:

hi guys,
how i get a json object from an url?
the json looks simular like this
image

i tried this but it works only with a array of objects
image

it only returns null.

Posts: 1

Participants: 1

Read full topic


IONIC 4 + Laravel CORS

$
0
0

@r2get wrote:

ok, i have been searching the web for hours now and found a lot of results but no working ones :frowning:

I am developing a app in ionic 4. Up till now i was using my local “api” to test (which works) but now i want to test it with the live version which is build using laravel - it is a exact copy of the local version but then live on the domain.

I have installed https://github.com/barryvdh/laravel-cors to handle the cors and when i test the cors on https://www.test-cors.org it shows:

date: Fri, 07 Jun 2019 22:18:39 GMT
content-encoding: gzip
server: Google Frontend
access-control-allow-origin: *
etag: "1rO4KQ"
allow: POST, GET, OPTIONS, PUT, DELETE
access-control-allow-methods: POST, GET, OPTIONS, PUT, DELETE
content-type: text/html
status: 200
x-cloud-trace-context: c463d031b08229c22feccaba743c28a5
cache-control: public, max-age=600
access-control-allow-headers: access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,content-type
expires: Fri, 07 Jun 2019 22:28:39 GMT

so i guess my server side cors is ok. Now in ionic im doing the following:

  getPartnersForZipcode(zipcode: string): Observable<any> {
return this.http.post(this.baseUrl+'/search-partners', {zipcode:zipcode}, this.httpOptions).pipe(
    map(results => results),
);

as http options im using

 httpOptions = {
headers: new HttpHeaders({
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin':'*',
  'Access-Control-Allow-Methods':'POST, GET, PUT, OPTIONS, DELETE, PATCH',
  'Access-Control-Allow-Headers': 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With',
})

*I tried it also with no headers, also with only content type etc… none made a difference

which is using the package import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

In postman i get a good response with data

but in ionic (using ionic --serve and devapp on device (ios)) im getting CORS error

…i dont know whats happening… why do my requests dont work in ionic?

Posts: 1

Participants: 1

Read full topic

Ion2-calendar - can't bind to ngModel (Ionic 4)

$
0
0

@wekas wrote:

Does anyone know why I am getting the following error?
Does it not work with Ionic 4?
I am importing in my app.module:

import { CalendarModule } from 'ion2-calendar';
imports [
    ...
    CalendarModule
  ],
<ion-calendar [(ngModel)]="date"
              (change)="onChange($event)"
              [type]="type"
              disableDays=[1,2,3,4]
              [format]="'YYYY-MM-DD'">
</ion-calendar>

I’m getting the error:
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘ion-calendar’.

  1. If ‘ion-calendar’ is an Angular component and it has ‘ngModel’ input, then verify that it is part of this module.
  2. If ‘ion-calendar’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component

Posts: 1

Participants: 1

Read full topic

Good date picker for Ionic 4 (recommendations please)

$
0
0

@wekas wrote:

I have tried to use ion2-calendar but I can’t get it working properly with Ionic 4:

Can anyone recommend a good date picker that I can use to select weeks or at least restrict the day picked to Sunday?

Cheers!

Posts: 1

Participants: 1

Read full topic

Ionic2 Phone Simulated Mifare 1 card

How to Increment and decrements item quantity for a specific product from list of product list

$
0
0

@flycoders_sourav wrote:

Here is my html code

<ion-col col-12 class="pro-listing" *ngFor="let item of product_list ; let i=index" >
          <ion-avatar item-left (click)="openProductDetails(item)">
            <img src="{{item.image}}">
            <div class="off-bg">{{item.product_discount}}% off</div>
            <div class="vegstatus"><img src="assets/imgs/veg-symbol.png" ></div>
          </ion-avatar>
          <div class="avatar-content">
            <div class="expressimg"><img src="assets/imgs/express.png"></div>
            <!-- <strong>FRESHO</strong> -->
            <h2>{{item.product_name}}</h2>
           
            <div class="form-group">
            <ion-list>
                <ion-item class="form-control">
                  
                  <ion-select>
                    <ion-option  *ngFor="let price of item.price_list" [value]="price.price_id">{{price.price_quanty}}-{{price.price_quanty_unit}} Rs.{{price.net_price}}</ion-option>
                  </ion-select>
                </ion-item>
              </ion-list>
            </div>
            <div class="rdt">
           
          
                <ion-item class="redirect-bg" >
                
                    <ion-row>
                        <ion-col col-6>
                        <div class="special-price"> 
                            <span class="old-price"> Rs.{{item.product_mrp}}</span> 
                            <span class="price-label">Rs.{{item.product_net}}</span> 
                        </div>
                      </ion-col> 
                      <ion-col col-6 class="calculation" width-25>
                      <button class="add-btn" clear (click)="decrementQty()"><ion-icon name="remove-circle" ></ion-icon></button>
                      <span>{{item_qty}}</span>
                      <button class="add-btn" clear (click)="incrementQty()"><ion-icon name="add-circle" ></ion-icon></button>
                    </ion-col>
                    </ion-row>
                  </ion-item>
                </div>
          </div>
        </ion-col>

.ts

incrementQty(){
  this.item_qty += 1;
  console.log(this.item_qty + 1);
  }
  
  //decrements item
  
  decrementQty(){
  if(this.item_qty-1 < 1){
    this.item_qty = 1;
    console.log('item_1->' + this.item_qty)
  }
  else{
    this.item_qty -= 1;
    console.log('item_2->' + this.item_qty);
  }
  }

the number gets incremented and decremented but the price gets incremented when i CLick on the (+) and (-) icon but it gets incremented and decremented for all the items in the grid…

but i want to for a specific product

Screenshot_7

Thanks in advance

Posts: 1

Participants: 1

Read full topic

Git flavoured markdown for ionic v4?

$
0
0

@kchurst wrote:

I’m looking for a git flavoured markdown editor for my ionic v4 app. Does anyone have any suggestions to something that comes with a MIT/Free license? I want to be able to make the app that I am building free for public use. I also want to be able to use the app offline, so a cdn probably won’t work.

Thank you, I know there have been threads made about markdown editors before, but I didn’t see any like this.

Posts: 1

Participants: 1

Read full topic

How to handle Hide/ Show on four button in ionic

$
0
0

@pt2609 wrote:

I have four buttons initially first button is visible when i select photo second button gets visible and first gets hide and again select photo on second button third button gets visible and first second button hiding remain and at thee end when select fourth button all the button gets hide. How to do this in ionic please help me.

.html code

 <div  *ngIf="hideone">
  <button ion-button full (click)="openeditprofile()"  >
    <ion-icon name="camera"></ion-icon>&nbsp;Take Photo 1
  </button>
</div>
<div >
  <button ion-button full (click)="openeditprofiletwo()" *ngIf="hidetwo">
    <ion-icon name="camera"></ion-icon>&nbsp;Take Photo 2
  </button>
</div>
<div *ngIf="hidethree">
  <button ion-button full (click)="openeditprofilethree()" >
    <ion-icon name="camera"></ion-icon>&nbsp;Take Photo 3
  </button>
</div>
<div *ngIf="hidefour">
  <button ion-button full (click)="openeditprofilefour()" >
    <ion-icon name="camera"></ion-icon>&nbsp;Take Photo 4
  </button>
</div>

Posts: 1

Participants: 1

Read full topic


Ionic form format changing from floating to rectangular box

$
0
0

@saif wrote:

I created a login form using ionic4 which yields me a floating text row to enter the login credentials. below is the code.

<ion-content>
<ion-title class="ion-text-center" >Login</ion-title>
<ion-item>
  <ion-label position="floating" >Email Id</ion-label>
  <ion-input type="text" ></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating" >Password</ion-label>
  <ion-input type="password" ></ion-input>
</ion-item>
<ion-text color="tertiary"><h6>Forgot Password?</h6></ion-text>

<div class="login-btn">
    <ion-button class="login-button" expand="full">Login</ion-button>
    </div>
  </div>

I want the rectangular input box in the form instead of floating text row.
login
I want the ionic4 login form similar to the form in the image. I tried searching online but didn’t find any resolution.

Posts: 1

Participants: 1

Read full topic

Ionic 4 Electron Auto Update

$
0
0

@billygerhard wrote:

Has anyone setup Ionic 4 with Electron using Capacitor, and setup auto updates? Anyone have any code examples, or tutorials on how to set this up?

Posts: 1

Participants: 1

Read full topic

Error "ionic cordova run android --device" after native-run update

$
0
0

@NurGuz wrote:

Hi guys,

After having updated native-run, the command ionic cordova run android --device has stopped working.

I have everything updated, Android Studio SDK and yours corresponding packages.

Ionic info:

Ionic:

   Ionic CLI                     : 5.0.1 (C:\Users\nuria\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 7 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.4

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

The error is:

> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device
Error: Command failed: C:\Users\nuria\AppData\Local\Android\Sdk\platform-tools/adb -s RF8M204LVHX shell getprop

    at ChildProcess.exithandler (child_process.js:294:12)
    at ChildProcess.emit (events.js:189:13)
    at maybeClose (internal/child_process.js:970:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
[ERROR] An error occurred while running subprocess native-run.

        native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-d... exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Any ideas?

Posts: 1

Participants: 1

Read full topic

Error 65 with cordova cli 9

$
0
0

@serviceminder10 wrote:

I’ve been trying to update my project to match all the versions on AppFlow and I think I’m close but I’m getting an error 65 when trying to build/launch the emulator for iOS. This happens regardless of the setting of the “use old build system” flag.

Here’s error (related to the linker looks like):

[cordova] clang: error: linker command failed with exit code 1 (use -v to see invocation)
[cordova]
[cordova] ** BUILD FAILED **
[cordova]
[cordova]
[cordova] The following build commands failed:
[cordova] Ld build/emulator/ServiceMinder.app/ServiceMinder normal x86_64
[cordova] (1 failure)
[cordova] Command finished with error code 65: xcodebuild -workspace,ServiceMinder.xcworkspace,-scheme,ServiceMinder,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/john/Projects/ServiceMinder.App.Mobile/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/john/Projects/ServiceMinder.App.Mobile/platforms/ios/build/sharedpch,-UseModernBuildSystem=0
[cordova] xcodebuild: Command failed with exit code 65
[cordova] Error: xcodebuild: Command failed with exit code 65

And here’s my ionic info:

Ionic:

Ionic CLI : 5.0.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.3
@ionic/app-scripts : 3.2.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 7.1.4, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic 3.1.3, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 12 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.4

System:

Android SDK Tools : 26.1.1 (/Users/johndkeene/Library/Android/sdk)
ios-sim : 8.0.1
NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61

Posts: 3

Participants: 2

Read full topic

Ionic 3 FTP Tutorial

$
0
0

@simonkincaidkintroni wrote:

I have looked all over the place, and I cannot find a satisfactory tutorial on how to actually get FTP properly working. I can connect to an FTP, but I cannot download or upload.

Does anyone have any experience with FTP on ionic?

Posts: 1

Participants: 1

Read full topic

Viewing all 70439 articles
Browse latest View live


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