EDIT: Trying this: https://masteringionic.com/blog/2018-02-06-dynamically-add-and-remove-form-input-fields-with-ionic/

I don’t know the proper terms to describe what i need to do so i can’t find the correct posts to help, so here it goes:

I have a request form that has a preset number of fields to fill out (from, to, date, time) and once submitted a bunch of firebase functions are triggered to pass the data to sendgrid email, sending a confirmation to the user and a quote request to the admins.

Right now everything is explicitly laid out as in the form fields are named and then passed to the function upon hitting submit.

My new hurdle is adding an unknown amount of additional requests to the form and saving them appropriately in firestore. So someone can fill out from, to, date, time, then click “Another Request” which will cause a new empty form to show below the one they filled in and allow them to enter a completely new set of from, to, date and time. Upon submitting the information both requests get filed under the same firestore document with the first one have “1” after the field names ( from1, to1, date1, time1) and the 2nd one having "2"s after (from2, to2, date2, time2). This would continue up until about 5 requests which then i would block additional ones from being added.

Currently i was just going to duplicate the entirety of the form, give all the field names a “2” at the end, and then have an *ngIf watch for if they click the “Another Request” button. But then i would have to have logic on all subsequent pages checking for if a 2, 3, 4 and 5 request count exist for each main request.

I’m using ionic 5 and firebase firestore.

TL:DR : Current form is setup to take 4 named fields and submit them to firestore collection/document. I would like to setup logic for the user to be able to add another form (the 4 same fields) but dynamically create the fields in the database grouped under a main ID (so i’m not creating a form with the same 4 fields repeating 5 times, and then having to track 5 sets of the variables in the database when most of them will be blank). Then subsequent pages that use these fields can just query the main ID, see how many sets of requests there are, and show the data in a list style loop.

1 post - 1 participant

Read full topic

Ionic is making line below after each field I am creating. how can I remove this line? What this line thing “officially” called? Is it removable by CSS?

My code:

<ion-grid style="height: 100%;" class="something-semantic">

  <ion-row class="something-else-semantic">

    <ion-col size-md="6" offset-md="3" class="something-semantic">

      <ion-card style="height: 100%;" class="something-else-semantic">

        <ion-card-header>

          <ion-card-title>

          </ion-card-title>

        </ion-card-header>

        <ion-card-content>

          <ion-item>

            <ion-thumbnail slot="start">

              <!-- <ion-img [src]="../../assets/logos/logo1.png"></ion-img> -->

              <img src="../../assets/logos/logo1.png">

            </ion-thumbnail>

            <ion-text style="color:#7fba00; font-weight: bolder; ">Cool Website</ion-text>

          </ion-item>

          <ion-item>

            <ion-text>Sign in</ion-text>

          </ion-item>

          <ion-item hidden>

            <ion-text style="color: red;">

              Account doesn't exist. Enter a different account or <a>get a new one.</a>

            </ion-text>

          </ion-item>

          <ion-item>

            <ion-input placeholder="Email or Username"></ion-input>

          </ion-item>

          <ion-item>

            <ion-text> Don't have an account? <a>Sign up</a> </ion-text>

          </ion-item>

          <div class="ion-margin-vertical ion-text-center">

            <ion-button fill="solid" expand="block" color="secondary" size="small"

              style="text-transform: none; width:auto;">Next</ion-button>

          </div>

        </ion-card-content>

      </ion-card>

    </ion-col>

  </ion-row>

</ion-grid>

A second question is : why image is working when using relative path and normal html image tag, but not working when using ion image tag? [ see my code ]

1 post - 1 participant

Read full topic

Hi Team/ Fellow Ionic-ers.

I have a problem here of using zipalign, I followed all the steps here Android Play Store Deployment.
The issue came on the last step zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

I got an Error

Anele-MacBook-Pro:release anele$ ./zipalign -v 4 app-release-unsigned.apk learner.apk
dyld: Library not loaded: @rpath/libc++.dylib
  Referenced from: path/to/my/android/app/build/outputs/apk/release/./zipalign
  Reason: image not found
Abort trap: 6
Anele-MacBook-Pro:release anele$ 

Like I am so bumbed-out to get stuck on the last step … Also note that all my <img /> tags point to online source like <img src="https://i.imgur.com/AlWWrSz.jpg" />

Please help and Thank You In Advance

1 post - 1 participant

Read full topic

Hi!
Im creating an app and I need to keep working in background but this doesnt work.
Im using:

https://github.com/katzer/cordova-plugin-background-mode

I am on Visual studio with ionic , so I execute:

ionic cordova run android

The app is launched and working. The first view is a Login, I fill the login and this take me to the second view (thit is a tab page).
On this page I add:

import { BackgroundMode } from '@ionic-native/background-mode/ngx';

constructor(private background: BackgroundMode){
this.background.enable();
console.log(this.background.isEnable());
console.log(this.background.isActive());
this.background.moveToBackground();
}

The problem is that when I move the app to the background, is “restarted” . I mean that when I open the app on background it takes me again to the first view where I should do the Login. So this is not working.

Am I doing something wrong? Is visual studio? How can I solve it?

Thanks!

1 post - 1 participant

Read full topic

Good Day! I want to implementing a feature that after customers clicking “Add to cart” Button, the increment and decrement product amount will show up. below is my code:

<ion-slide *ngFor="let product of cat.products">
          <ion-card class="flat-card ion-no-padding ion-no-margin">
            <img src="{{image_link+product.filename}}" class="product-img">
            <ion-card-header>
              <h6>
                <ion-text color="dark">{{product.name}}</ion-text>
              </h6>
              <ion-text color="medium" *ngIf="product.old_price" style="text-decoration:line-through">
                {{product.old_price |  currency: 'Rp '  : 'symbol' : '1.0-0'}}</ion-text>
              <ion-text *ngIf="!product.old_price">&nbsp;</ion-text>
              <br>
              <strong>
                <ion-text color="success">{{product.price |  currency: 'Rp '  : 'symbol' : '1.0-0'}} /
                  {{product.unit}}
                </ion-text>
              </strong>
            </ion-card-header>
            <ion-card-content>
              <!-- <div *ngIf="!getProductCount(product)"> -->
                <ion-button expand="full" (click)="addToCart(product)">Beli</ion-button>
              <!-- </div> -->

              <!-- INCREMENT AND DECREMENT BUTTON-->
              <div *ngIf="getCartProductCount(product) > 0">
                <ion-row>
                  <ion-col>
                    <ion-button (click)="decreaseCartItem(product)">
                      <ion-icon name="remove-outline" ></ion-icon>
                    </ion-button>
                  </ion-col>
                  <ion-col>
                    <ion-text>{{ getCartProductCount(product) }}</ion-text>
                  </ion-col>
                  <ion-col>
                    <ion-button (click) ="addToCart(product)">
                      <ion-icon name="add-outline" ></ion-icon>
                    </ion-button>
                  </ion-col>
                </ion-row>
              </div>

            <!-- END INCREMENT AND DECREMENT BUTTON -->
            </ion-card-content>
          </ion-card>
        </ion-slide>

After clicking Add To Cart button, below image is what i expected:

Expected900×556 5.02 KB

But i got below image:

Real895×556 5.42 KB

When i clicked add to cart button at the first product, the increment and decrement button is appearing, but they’re not when i clicked the second product. it will appear if i decrease the first product amount till 0.

Im sorry for my bad explanation. Im trying my best to explain my problem. any help would be appreciated. Thanks!

1 post - 1 participant

Read full topic

Is there any library like this in ionic?

1 post - 1 participant

Read full topic

Hi, I am having trouble getting the correct CSS for my app.
I Currently have 2 cards at the top of an image. The purpose of my app is to use the native screenshot plugin to take a screenshot of the two cards just above the image. As close as possible to this designed in Android (I am trying to move from Android to Ionic):

null1080×2254 117 KB

Here is what I have currently produced in Ionic:

Screenshot_20200715-190748_MyApp1080×2340 938 KB

I would like to align the 2 cards at the top of the screen with no padding then the image right below so. Here is my HTML code:

<ion-content>

  <ion-grid>

    <ion-row>

      <ion-col>

        <ion-card>

          <ion-card-header>

            <ion-card-title>{{this.RetDataType}}</ion-card-title>

            <ion-card-subtitle>{{this.RetRefNum}}</ion-card-subtitle>

          </ion-card-header>

          <ion-card-content>

          </ion-card-content>

        </ion-card>

      </ion-col>

      <ion-col>

        <ion-card>

          <ion-card-header>

            <ion-card-title>Image Number</ion-card-title>

            <ion-card-subtitle>{{this.RetImageNum}}</ion-card-subtitle>

          </ion-card-header>

          <ion-card-content>

          </ion-card-content>

        </ion-card>

      </ion-col>

    </ion-row>

  </ion-grid>

  

  <ion-img [src]="RetTakenImage"></ion-img>

  <ion-button (click)="TakeScreenshot()">Screenshot</ion-button>

</ion-content>

I have no CSS added yet as i had tried removing padding etc but cant get them how i want them. Any help would be greatly appreciated!

Thanks

2 posts - 2 participants

Read full topic

Hi,
I’m trying my app on android. I changed my splash screen in Android studio, but I still have .5s of white screen between my splash screen and my app.

Any solution ?

Thanks

4 posts - 2 participants

Read full topic

Hi!

I only have the www folder, and i want to “load” the project from it, is it possible?

Thanks!

5 posts - 2 participants

Read full topic

Hi there!

I deleted my node modules and did npm install, and after that, my website become so slow at loading and i get this message at the start : Angular is running in development mode. Call enableProdMode() to enable production mode."

I was building a ionic app, but now it seems that the main framework is angular. Why and how do i make that ionic becames the number one?

1 post - 1 participant

Read full topic

Hey, I have been upgrading my Ionic platform and I have been able to get all of the components working on the new Ionic 5 platform but there is only this one API that is not working. I have tested on the android application and it was working fine to make this API call. But on the IOS side it does not work. I did receive a CORS error earlier with other API responses but I was able to resolve those issues so Im not sure why this API call is failing. Also I have tested on Postman and the server is working fine.
Any help is appreciated.

import {throwError as observableThrowError, Observable} from 'rxjs';

import {catchError, map} from 'rxjs/operators';
import {Component, ViewChild} from '@angular/core';
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders, HttpRequest} from '@angular/common/http';
import {env} from '../env/env';
import {ToastController, IonApp, NavController} from '@ionic/angular';
import 'rxjs/add/operator/toPromise';
import {NavigationExtras} from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable()
export class ApiService {
  private userID: string;
  private userNotification: string;
  private userDetails: string;
  private userToken: string;
  constructor(
      public storage: Storage,
      private http: HttpClient,
      public toastCtrl: ToastController,
      public appCtrl: NavController,
      // public device: Device
  ) {

  }

inviteFriend(mobile, username){
      return this.http.get(`${env.p3ApiUrl}/users/invite/${mobile}/${username}`).pipe(
           catchError(this.handleError)).toPromise();
  }

usage:

inviteFriend() {
    if (!this.contact.name) {
      this.ApiService.showToast('Please enter name');
      return false;
    }
    if (!this.contact.mobile) {
      this.ApiService.showToast('Please enter mobile');
      return false;
    }
    if (this.contact.mobile.length != 10) {
      this.ApiService.showToast('Please enter a valid mobile number');
      return false;
    }

    for (let i = 0; i < this.friends.length; i++) {
      if (this.friends[i].mobile == this.contact.mobile) {
        this.ApiService.showToast('You\'ve already invited a contact with ' + this.contact.mobile);
        return false;
      }
    }

    this.loadingCtrl.create({
      message: 'Inviting friend ...'
    }).then((res) => {
      res.present();
      let userDisplayName;
      this.ApiService.getUserDetails()
          .then((r: any) => {
            userDisplayName = r.firstName + ' ' + r.lastName;
            this.ApiService.inviteFriend(this.contact.mobile, userDisplayName)
                .then((r: any) => {
                  console.log(r);
                  if (r.status == 200) {
                    this.showUserExistsAlert(this.contact);
                  }
                  if (r.status == 201) {
                    this.addFriend(this.contact);
                  }
                  res.dismiss();
                })
                .catch(e => {
                  console.log(e);
                  res.dismiss();
                  if (e.status == 400) {
                    this.ApiService.showToast('Please enter a valid mobile number');
                  }
                });

          })
          .catch(e => {
            res.dismiss();
          });
    });
  }

error:

[Log] HttpErrorResponse (cordova.js, line 1540)

error: Event {isTrusted: false, total: 0, totalSize: 0, loaded: 0, position: 0, …}

headers: HttpHeaders

headers: Map {} (0)

lazyUpdate: null

normalizedNames: Map {} (0)

HttpHeaders Prototype

message: "Http failure response for https://link-URL: 400 Bad Request"
No Properties

name: "HttpErrorResponse"
No Properties

ok: false
No Properties

status: 400
No Properties

statusText: "Bad Request"
No Properties

No Properties

HttpErrorResponse Prototype

constructor: function(init)

HttpResponseBase Prototype

2 posts - 2 participants

Read full topic

<IonList>
    <IonItem>
        <div>
            ...
        </div>
    </IonItem>
<IonList>

The content inside the <div> tag will not render properly (incorrect styling). If you remove the <div> it will show just fine. I’m trying to make an IonItem that spans the entire width but with a container inside the item to span only a percentage of the width.

This problem occurs with <span>, <p>, etc. Someone asked this on StackOverflow: https://stackoverflow.com/questions/46991253/why-putting-anything-div-p-or-just-text-inside-ion-item-after-ion-input-is-n

But the answer says to tag the <div> with item-content. But as far as I can see that doesn’t exist for Ionic React? Is there any way to accomplish this?

1 post - 1 participant

Read full topic

How do i get date like “YYYY-MM-DD” when i clicked on any dates from ion2-calendar.

I have used the below library for calendar,
https://github.com/HsuanXyz/ion2-calendar/tree/v2

My HTML code:

<ion-calendar [(ngModel)]="dateRange" [options]="optionsRange" [type]="'string'" [format]="'YYYY-MM-DD'"
              (onChange)="selectedRangeDates($event)" (onSelectStart)="onSelectStart($event)"
              (onSelectEnd)="onSelectEnd($event)" >
            </ion-calendar>

My TS Code:

optionsRange: CalendarComponentOptions = {
    pickMode: 'range'
  };

selectedRangeDates(dates) {
console.log(JSON.parse(JSON.stringify(dates));
}

onSelectStart(dates) {
    console.log("onSelectStart DATES :: " + JSON.stringify(dates));
}

OUTPUT:
onSelectStart DATES ::{"time":1595442600000,"isToday":false,"title":"23","subTitle":"","selected":true,"isLastMonth":false,"isNextMonth":false,"marked":false,"cssClass":"","disable":false,"isFirst":false,"isLast":false}

On the above output i am getting “23” as selected date but instead of 23 i want to get YYYY-MM-DD when on click a single date as start date and dynamically set next 30 days in calendar from the selected date.

1 post - 1 participant

Read full topic

E/FileTransfer: {
“code”:3,
“source”:“http://localhost/capacitor_file/data/user/0/io.ionic.starter/files/15948856657
66.jpg”,
“target”:“https://mysite/upload",“http_status”:200,“exception”:"Failed to connect to
localhost/127.0.0.1:80”
}
java.net.ConnectException: Failed to connect to localhost/127.0.0.1:80

I want to upload photos on android app using Ionic 5 and capacitor. I get this error.

how can i solve this problem?

1 post - 1 participant

Read full topic

Hey I’m trying to change the fontSize based on toggle state.

<CreateAnimation
            play={true}
            iterations={Infinity}
            duration={350}
            fromTo={[
              { property: 'fontSize', fromValue: '64px', toValue: !expanded ? '64px': '24px' }
            ]}
          >
            <div>Helloworld</div>
          </CreateAnimation>

This doesn’t work. Can someone shed some light here.
Also the documentation seems a bit outdated for react
For example https://ionicframework.com/docs/utilities/animations#overriding-ionic-component-animations
The example shown there, imports CreateAnimation class which is of react but uses in the end the javascript one i.e. createAnimation.

1 post - 1 participant

Read full topic

Hi everyone,
I realized that when clicking on any menu item, when loading the page it has a slight crash. The ion-menu-button button takes time to appear. And when it clicks, it takes time until the sidemenu appears.
When navigating between pages, every time you enter the page, this crash occurs. This html and .ts files are just a piece of the other app. Made this just for tests and even if has nothin installed, just the scaffold when create the app.

if anyone can help me to understand why its happening.

1 post - 1 participant

Read full topic

Hi everyone,

Im wondering if someone could help me with the Frosted Glass effect using css only in my ionic app with angular, is it possible?

i’ve been following the tutorial but it seems the blur effect doesnt seems applied to my background

<ion-content [fullscreen]="true" class="background-test">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>

</ion-content>

ion-content.background-test
{
  --background: url(../../assets/img/test.png) no-repeat center/cover fixed ;
}

if this is possible, could someone let me know what should I set in my container class css ?

thankyou!

1 post - 1 participant

Read full topic

Hi, I am looking to store safe my data with @ionic/storage.

My current setup is @ionic/storage and cordova-sqlite-storage plugin

On my app.module I have this config:

IonicStorageModule.forRoot({
name: ‘myName’,
driverOrder: [‘sqlite’, ‘localstorage’, ‘indexeddb’, ‘websql’],
dbKey: ‘myKey’
}),

To store ciphered data is needed to install Cordova-sqlcipher-adapter plugin? Or I have to install only:

@ionic/storage + Cordova-sqlcipher-adapter plugin ?

thanks

1 post - 1 participant

Read full topic

Firebase Auth doesnt work in IOS Capacitor Application.

• Auth in web browser works fine!
• Auth in Capacitor Android application works fine!
• Auth in Capacitor IOS application doesnt work!

Error is:
“auth/cors-unsupported”
message: “This browser is not supported.”

Dependencyes:

    "@angular/fire": "^6.0.2",
"@angular/forms": "~8.2.14",
"@angular/http": "^7.2.16",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@angular/service-worker": "~8.2.14",
"@auth0/angular-jwt": "^4.1.2",
"@capacitor/android": "^2.1.0",
"@capacitor/core": "^2.2.0",
"@capacitor/ios": "^2.2.0",
"@ionic-native/core": "^5.0.7",
"@ionic-native/device": "^5.24.0",
"@ionic-native/facebook": "^5.26.0",
"@ionic-native/file": "^5.24.0",
"@ionic-native/file-transfer": "^5.24.0",
"@ionic-native/google-plus": "^5.26.0",
"@ionic-native/in-app-browser": "^5.24.0",
"@ionic-native/network": "^5.24.0",
"@ionic-native/onesignal": "^5.24.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.2.3",
"@ionic/storage": "^2.2.0",

1 post - 1 participant

Read full topic

Hello everyone,

I have a firebase RTDB with description:

var postData = {

** flag_upd_templ: 1,**

** key_upd_templ: xxxx**

** };**

1- First I set flag ‘flag_upd_templ’ to ‘1’
2- another application check this flag and set it to ‘0’

Then I have to wait for this flag to be set ‘0’ to proceed more data…

I’ve tried the:
this.db.database.ref(’***********’).equalTo(0)

but how can I embedded in a function that would wait for it?

Thanks.

1 post - 1 participant

Read full topic