Quantcast
Channel: Ionic Forum - Latest posts
Viewing all 230459 articles
Browse latest View live
↧

How to update value in modal if I clicked button on parent page without dismiss the modal

July 2, 2023, 1:05 am
$
0
0

My Modal

const modal = await this.modalCtrl.create({
      component: SelectSchedulePage,
      cssClass: 'modal-bottom-sheet',
      initialBreakpoint: 0.3,
      breakpoints: [0.3, 0.5],
      backdropDismiss: false,
      backdropBreakpoint: 0.3,
      handleBehavior: 'cycle',
      componentProps: {
        busEta: this.busEta
      },
    }).then(modal => modal.present());;

SelectSchedulePage Component

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-select-schedule',
  templateUrl: './select-schedule.page.html',
  styleUrls: ['./select-schedule.page.scss'],
})
export class SelectSchedulePage implements OnInit {
  @Input() busEta: any;

  onReminder: boolean = false;
  selectedSchedule: any;

  constructor() { }

  ngOnInit() { }
}

Assume i want to update busEta every time i clicked button on parent page, and display on modal content while modal still showed up without closing it

↧
Search

CSS Properties not working properly

July 2, 2023, 4:44 am
$
0
0

Sorry if i’m doing something really stupid but I’m working through a tutorial from @galaxies_dev on youtube. I’m trying to style an ion-item but it doesn’t seem to be doing anything.

List.css contains the below code

ion-item {
  --background: #5cffa8;
}

List.tsx contains this opening tag for an ion item

<IonItem lines="none">

I’m exepecting it to change the background colour but instead I just get the same grey. I’ve tried reloading, and even restarting my pc. Any help would be appreciated.

↧
↧

Capacitor: Including Plugins in client side javascript without import syntax

July 2, 2023, 6:28 am
$
0
0

Hi julio-ionic

thanks for these hints.

In the meantime I struggled a lot with this subject and finally the developer of the capacitor blobwriter plugin helped me out:

There are bundled javascript files available for capacitor that can be included by a simple script tag.

Perfect solution for a humble developer like me whose skills are not sufficient for using complex frameworks like inoic!

Best regards, Ulrich

↧

CapacitorHttp: Response for binary file is neither blob nor base64

July 2, 2023, 6:43 am
$
0
0

Hi there,
I’m completely new to capacitor, so beare with me.
Currently I’m trying to download a binary file (Sqlite database) and store it in the database folder. For storing I intend to use the blobwriter plugin which accepts a pure binary file only. Handing over the data of the response to blobwriter does not work, I get a file of size 0.
As the data in the response is of type “string” and its size is larger than that of the binary file, I suspected that the data is base64 encoded, however decoding by atob throws an error “wrong format”. Now I’m helpless.
Before I tried to use the Filesystem plugin but no success either. Therefore I switched to blobwriter.
My javascript:

        try {
            Capacitor.Plugins.Filesystem.requestPermissions().then((status) => {
                console.log(status);
                Capacitor.Plugins.CapacitorHttp.get({
                    url: 'https://webentwicklung.ulrichbangert.de/_benni/substanzen-electron/Substances.db',
                    responseType: 'blob'
                }).then(function ({ data }) {
                    console.log(data.length);
                    window.capacitor_blob_writer({
                        path: 'file:///data/user/0/com.substanzen.app/databases/SubstancesSQLite.db',
                        data: data.data,
                        fast_mode: true
                    });
                });
            });
        } catch (err) {
            console.log(`Error: ${err} `);
            throw new Error(`Error: ${err}`)
        }

This runs without throwing errors, however the resulting file in the database folder is empty.
Thanks in advance for your support!
Best regards, Ulrich

response-from-http-get

↧

Capacitor geolocation not working

July 2, 2023, 6:45 am
$
0
0

I tried installing capacitor geolocation but i am getting this error, please any suggestion?

C:\Users\Hp\Desktop\WIP\hellominna>npm install @capacitor/geolocation
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: hellominna@0.0.1
npm ERR! Found: @capacitor/core@4.7.0
npm ERR! node_modules/@capacitor/core
npm ERR! peer @capacitor/core@“^4.0.0” from @capacitor/app@4.1.1
npm ERR! node_modules/@capacitor/app
npm ERR! @capacitor/app@“4.1.1” from the root project
npm ERR! peer @capacitor/core@“^4.0.0” from @capacitor/haptics@4.1.0
npm ERR! node_modules/@capacitor/haptics
npm ERR! @capacitor/haptics@“4.1.0” from the root project
npm ERR! 2 more (@capacitor/keyboard, @capacitor/status-bar)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @capacitor/geolocation@“" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @capacitor/core@5.1.0
npm ERR! node_modules/@capacitor/core
npm ERR! peer @capacitor/core@“^5.0.0” from @capacitor/geolocation@5.0.5
npm ERR! node_modules/@capacitor/geolocation
npm ERR! @capacitor/geolocation@"” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\Hp\AppData\Local\npm-cache_logs\2023-07-02T13_42_55_957Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Hp\AppData\Local\npm-cache_logs\2023-07-02T13_42_55_957Z-debug-0.log

↧
↧

What are limits on number of Environments in each pricing plan?

July 2, 2023, 7:26 am
↧

Using Build Env Secrets at Run Time

July 2, 2023, 7:43 am
$
0
0

Apologies for the delay! The Ionic team has a lot of public channels to watch for questions, so sometimes it takes us time to respond.

For your question, those types of ENV variables aren’t available to runtime in the app. Those are Node variables (process.env) and Ionic apps don’t run in a Node process. Check out the framework-specific guides for environments, such as Angular’s here.

↧

How do i get users device ICCID in Angular

July 2, 2023, 8:16 am
$
0
0

I tried past libraries but it kept giving me “this library is not supported with Angular Ivy”

↧
Search

Ionic React IonDatetime - DateRange ReactJS

July 2, 2023, 9:46 am
$
0
0

Does Ionic provide a pre-built date range picker that can be readily used? When I mention a date range picker, I’m referring to something similar to the example shown.

image

I came across ion2-calendar, but it appears to be compatible only with AngularJS.

↧
↧

Action button support for Capacitor PushNotification plugin

July 2, 2023, 3:44 pm
$
0
0

I was hoping this would be an easy question for people in this community and everyone working on Capacitor.

Look forward to someone helping clarify this.

Thanks,
Sanjay.

↧

What are limits on number of Environments in each pricing plan?

July 2, 2023, 11:00 pm
$
0
0

Thanks. If I may suggest changing the terminology in the Plan Details ? It says Environment Variables. Everywhere else the term variables refers to something else. The environment sets is a good metaphor, but not mentioned anywere. In the dashboard UI it is called Environments. When I create too many and alsmost reach the limit, the warning messages says: " You have met your custom environment limit". So Custom Environment or just Environment would be a better (from consistency point of view) term. Variables is not just different - it is used elsewhere - so it is misleading, or at least it was to me.

Why would someone care about Environments limit at all? For others who read this - Environment is what you must have to build Android flavors. My use case is - one flavor per geographical region. So if you got 11 regions to serve, the Basic plan is insufficient (has 10 Environment sets). I would love to have lot more Environment sets or a flavor selector in the Android Build UI.

Sorry for being verbose, hoping to help others

↧

Second popover doesnt open in the event

July 3, 2023, 3:22 am
$
0
0

I have two popover in the header
My first popover it open the correct place (event), but when the second popover open in the center

header.component.html

<ion-header id="main-content">
  <ion-toolbar  style="--background: #f26721;">
    <ion-buttons slot="start">
      <ion-menu-button style="--color: white"></ion-menu-button>
    </ion-buttons>

    <ion-button slot="end" (click)="presentPopoverProfile($event)" color="none" class="button">
      <ion-icon slot="icon-only" name="person-circle"></ion-icon>
    </ion-button>

    <ion-popover #popover [isOpen]="isOpenProfile" (didDismiss)="isOpenProfile = false"> <!-- largura do popover definida no scss -->
      <ng-template>
        <ion-content class="ion-padding" (click)="showProfile()">Conta</ion-content>
        <ion-content class="ion-padding" (click)="logout()">Sair</ion-content>
      </ng-template>
    </ion-popover>

    <ion-button slot="end" (click)="presentPopoverNotification($event)" color="none">
      <ion-icon name="notifications-outline"></ion-icon>
    </ion-button>

    <ion-popover #popover [isOpen]="isOpenNotification" (didDismiss)="isOpenNotification = false"> <!-- largura do popover definida no scss -->
      <ng-template>
        <ion-content class="ion-padding">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, dignissimos!</ion-content>
      </ng-template>
    </ion-popover>
    
  </ion-toolbar>
</ion-header>

header.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NavController, PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/core/services/auth/auth.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  constructor(
    private navCtrl: NavController,
    private router: Router,
    private authService: AuthService,
    private popoverController: PopoverController
  ) {}

  @ViewChild('popover') popover:any;

  isOpenProfile = false;
  isOpenNotification = false;

  ngOnInit() {}

  presentPopoverProfile(e: Event) {
    this.popover.event = e;
    this.isOpenProfile = true;
  }

  presentPopoverNotification(e: Event) {
    this.popover.event = e;
    this.isOpenNotification = true;
  }
}
↧

Looking for react js/stencil/capacitor/cordova programmer

July 3, 2023, 3:46 am
↧
↧

Capacitor geolocation not working

July 3, 2023, 4:04 am
$
0
0

latest version of geolocation plugin is for Capacitor 5, but you are still using Capacitor 4, so you have to install version 4 of the plugin.

npm install @capacitor/geolocation@latest-4

↧

Problem with availability of ionic3 app in play store

July 3, 2023, 4:07 am
$
0
0

There are a few misconceptions in this thread.

Latest Capacitor doesn’t need latest Ionic version.
Cordova is not close to the end.

↧
Search

I had a ionic mobile app and I will click the handler back button the app will exit , this is my problem It will nagivigate to previous page

July 3, 2023, 4:51 am
$
0
0

I had a ionic mobile app and I will click the handler back button the app will exit , this is my problem

↧

Action button support for Capacitor PushNotification plugin

July 3, 2023, 6:38 am
↧
↧

How to get the country of the store (Apple store or Play store)

July 3, 2023, 6:53 am
$
0
0

Hi,
Is it possible to determine the country where the app was downloaded? We are currently using @capawesome/capacitor-app-update which requires the country information. However, we can only retrieve the device language.

Thank you in advance and kind regards,

Davide

↧

What are limits on number of Environments in each pricing plan?

July 3, 2023, 7:40 am
$
0
0

Absolutely agree and appreciate the feedback! As luck would have it, we are shortly going to provide unlimited environments on all paid plans very soon. Stay tuned.

↧

Best practices for uploading files in the background

July 3, 2023, 7:40 am
$
0
0

Dear community,

Our app allows users to upload up to 250 pictures and other files after submitting a form. Since this can take quite some time, we do not want to force users to keep the app open during the entire upload process. Instead, we would like to move it into a background task so that users can continue doing other things or even switch to another app.

Currently, we are using the file-transfer plugin to upload files one by one and display the upload count on a progress bar. I assume that the background upload is somehow going to make use of the Background Tasks API. Therefore, I’m asking if anyone has experience with uploading files in the background and can provide some recommendations on how to design it as resilient as possible, sparing us from tapping into the same pitfalls.

Best regards,
Tarik

↧
Viewing all 230459 articles
Browse latest View live
Search