Please I am using ionic storage for my app which will be compiled to native(iOS, Android) not PWA. Is there a way to sync my offline data to my express.js server when online? I want the synchronization to happen in the background. I have heard of angular service workers but I don’t know if it would work for my use case considering it being compiled to native.
1 post - 1 participant
Only a small fraction of ionic components are exposed as parts for restyling, or have relevant css variables.
How do you style components that are not exposed as parts? Is there even a way, or are we stuck with ionic default looks?
3 posts - 3 participants
I am using ionic with angular, the html (simple version)
<ion-content *ngIf=“show” >
< ion-radio-group [value]=“option” (ionChange)=“selectOption($event)” >
<ion-button (click)=“doShow()”>
the ts (simple version)
let show = false;
let apple = ‘a’ ;
doShow(){
this.show = !this.show;
if(this.apple == ‘b’ ){
this.apple = ‘a’ ;
}
}
selectOption($event){ this.value = $event.target.value }
What I am trying to do is basically, we will have a button to control existence of the ion-content, that wrap the ion-radio-group inside.
The ion-radio-group is linked to ts file apple value. When switching on and off the ion-content. We will do some modification on the default value. If it is ever ‘b’, we set it to ‘a’.
Yes, the ui does reflects the changes from ‘b’ to ‘a’. If it is ever a ‘b’ to ‘a’. The ion-radio is lighten up.
The problem appears when we have never change to value of ‘b’ in the first place. And the value remains ‘a’ . When the ion-content is switching on and off, the value is accurately stay the same of ‘a’, but the UI no longer reflect the selected value once the ion-content is re-open for once. The ion-radio is never lighten up if it stays as ‘a’.
I have also try the work around of of setting the value ‘a’ even it is already ‘a’. still not lighten up the ion-radio.
1 post - 1 participant
Good evening from my side, new to capacitorjs and ionic framework. currently converted a react project of mine that has multiple views/ pages in an android app. but once i make use of ionic ui library to create a ionHeader component that would only display when on native devices, the app stopped scrolling
import { Outlet } from “react-router-dom”
import Navbar from “@/components/Navbar”;
import Footer from “@/components/Footer”;
import { isNativePlatform } from “@/utils/platform”;
import Header from “@/components/ionic/Header”;
const Layout = () => {
const isNative = isNativePlatform();
return (
<>
{isNative ? : }
</>
)
}
export default Layout
the Platform util code
// src/utils/platform.ts
import { Capacitor } from ‘@capacitor/core’;
export const isNativePlatform = () => {
return Capacitor.isNativePlatform();
};
please help me in resolving this issue
2 posts - 2 participants
Hi 
How to prevent a route/page to be destroyed? How to keep a route mounted?
This page has a google map. Everytime the page is destroyed, it has to be reloaded when the user come back. So the user has to wait again for the tiles being loaded despite they were already loaded before in the navigation. That’s what I want to fix.
Thanks!
1 post - 1 participant
Im trying to target ionic toast styles.Upon reviewing given styles there is no way to target toast-content section. 
Anyone can support about this .Highly appreciate your responses.
.toast-content {
padding-inline: 5px; <- I need to change here
padding-top: 14px;
padding-bottom: 14px;
}
5 posts - 2 participants
Designer belts in Frankfort typically refer to high-quality, fashion-forward belts available in the city of Frankfort, which could be Frankfort, Kentucky, or Frankfort, Germany. These belts often feature premium materials, such as leather, and are crafted by renowned brands, offering both style and durability. Whether you’re looking for classic designs or contemporary styles, you can find a range of options at upscale boutiques or department stores in Frankfort.
1 post - 1 participant
Here Im trying to achieve iconic segment button label bold selected button.
For selected segment button i need to add
color: black;
font-weight: 700;
For un selected segment button i need to add
color: #919495;
font-weight: 400;
Appreciate if anyone can support on this.
there is no custom properties to target this
Appreciate if anyone can support on this.
3 posts - 2 participants
Hi everyone, I’m a newbie trying to implement unit tests for my project, using Ionic Angular with the standalone mode. I tried to create a new project Angular and chose the standalone mode with blank mode, after finishing, I tried to run npm test to run a basic test, and It completed with no error and showed the report test. But the report doesn’t show Jasmine’s window (Screenshot 2024-08-01 at 1.23.23 PM.png - Google Drive)
I tried again to create a new project with NgModules mode but It was fine. I didn’t have an issue.
I using latest version
1 post - 1 participant
How can I programmatically select specific Ionic tab (in typescript file)? For example if I have in template…
I’m using Ionic 8 and Angular 18
<ion-tabs>
<ion-tab-bar slot="bottom" >
<ion-tab-button tab="home">
<ion-icon name="home"></ion-icon> Home
</ion-tab-button>
<ion-tab-button tab="favorites">
<ion-icon name="heart"></ion-icon> Favorites
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
How can I programmatically select home tab?
I have tried with @ViewChild but without success:
@ViewChild('tabs', {static: true}) tabs:IonTabs | undefined;
and than
this.tabs?.select('home')
but it is not working. The error I get is…
TypeError: Cannot read properties of undefined (reading ‘getActiveStackId’)
Regards
Darshan Hiranandani
1 post - 1 participant
Using Ionic/React 7.0.0 - React 18.2.0
In my IonDatetime component, I want to style calendar day buttons based on
highlightedDatesprops in IonDatetime.The styles applies properly when calendar day buttons are just displayed but they don’t apply as expected when the calendar day is active (clicked)
background or backgroundColor results the samebackgroundColor: '#fff', calendar day button has a colored background and font from both section of the if hasFocus applies (see screenshot 1, 2, 3)backgroundColor: '#fff', the colored background and font doesn’t apply, just the active style that I do not want (screenshot 0)4 posts - 2 participants
npm install angular2-csv2 papaparse
npm error code E404
npm error 404 Not Found - GET https://registry.npmjs.org/angular2-csv2 - Not found
npm error 404
npm error 404 ‘angular2-csv2@*’ is not in this registry.
npm error 404
npm error 404 Note that you can also install from a
npm error 404 tarball, folder, http url, or git url.
node -v
v20.16.0
npm -v
10.8.2
ionic -v
7.2.0
3 posts - 2 participants
I have an app where the users often times have to take hundreds of photos for insurance purposes.
I am currently storing the photos in the phone file system and then uploading them in batches of 50 photos at a time, which works most of the time.
What gives me problems is when the user switches apps or goes to the lock screen, which then causes all kinds of data transfer problems and errors.
Are there any libraries out there that can gracefully handle photo transfers to a server or is there a better way to do this?
1 post - 1 participant
details.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-details',
templateUrl: './details.page.html',
styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {
item: any[] = [];
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const itemString = this.route.snapshot.paramMap.get('item');
this.item = JSON.parse(JSON.stringify(itemString));
}
}
details.page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/main"></ion-back-button>
</ion-buttons>
<ion-title>
Details
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title> {{ item }} </ion-card-title>
</ion-card-header>
<p>{{ item }}</p>
<!-- <ion-item *ngIf="let a of item">{{a}}</ion-item> -->
<!-- <div *ngFor="let result of item"> -->
<!-- <ion-item *ngFor="let a of item;">
<p> {{ a.name }} </p>
</ion-item> -->
<!-- Add more details as needed -->
<!-- </ion-card-content> -->
</ion-card>
result
how to get specific value like value of name and company name
json testing from https://jsonplaceholder.typicode.com/users
thanks
1 post - 1 participant
I’m looking at storing data onto a persistent storage (sql based) without affecting the main UI thread. One option is to use a worker thread for this purpose. I came across this feature called OPFS storage which lets you write files to the native file system in a browser environment. And it is supported in a worker setup. So, ideally it should not affect the UI thread.
Sqlite has made available a library for this purpose. This library produces an ESModule which in theory should work for all browser based environments.
I have created a new Ionic project, added Electron platform and tried to integrate this library. But, I’m facing an issue where-in I’m getting run-time exceptions on usage of require statement. The library source code does not have any require statements.
Seems like when I compile the project and run, ionic cordova electron stack seems to be transpiling sqlite-wasm library to CommonJS syntax and it appears to me that when the app code refers to one of these files, it would not be compatible (because Ionic produces code compatible with ESModule syntax) and it simply throws the exception saying require is not defined.
While the electron platform is node js based, the browser front end environment, I understand is ESModule based. Is this mechanism is something which we can make it work? I require persistent storage to be sql based (we are migrating a ionic cordova windows app to ionic cordova electron app). What other options we have a sql based persistent storage and at the same time not affecting the UI thread?
I have hosted my sample project here along with the instructions.
Srinidhi
1 post - 1 participant
I’ve implemented a broadcast list audio streaming in a ionic app, using peerJS. Everything work fine on browser, but when i run my app on an android device, i’m unable to share stream between peers.
I get the following error in the logcat:
audio mode broadcast intent fail java.lang.SecurityException: Permission Denial: not allowed to send broadcast com.sonymobile.media.AUDIO_MODE_CHANGED_ACTION from pid=19195, uid=10369
I’ve done a lot of searches, but i didn’t find how to grant that permission to broadcast.
Please, does anyone have a fix to propose me ?
2 posts - 2 participants
My environement is like below:
Ionic:
Ionic CLI : 7.2.0 (C:\Users\s1100\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.9
@angular-devkit/build-angular : 13.3.11
@angular-devkit/schematics : 13.3.11
@angular/cli : 13.3.11
@ionic/angular-toolkit : 6.1.0
Cordova:
Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 12.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 16 other plugins)
Utility:
cordova-res : 0.15.4
native-run (update available: 2.0.1) : 1.7.3
System:
Android SDK Tools : 26.1.1 (C:\Users\s1100\AppData\Local\Android\Sdk)
NodeJS : v20.14.0 (C:\Program Files\nodejs\node.exe)
npm : 9.8.1
OS : Windows 10
I am updating to SDK34 i got error java.lang.SecurityException: com.xxxx.yyyyyy: One of RECEIVER_EXPORTED or RECEIVER_NOT_EXPORTED should be specified when a receiver isn’t being registered how to fix this issue
My Android Manifest.Xml is
1 post - 1 participant
I want to add a span around some text when a # or a @ is detected so I can change the color to make it look like usernames and hashtags in twitter. My code looks like this:
TS FILE:
ngOnInit(): void {
this.glyphService.getAllGlyphs().subscribe(
result => {
this.items = result;
// sort by rune id so list is newest to oldest
this.items.sort((a, b) => Number(b.rune) - Number(a.rune));
for (let i = 0; i < this.items.length; i++) {
this.items[i].glyph_content = this.replaceIt(this.items[i].glyph_content);
console.log(this.items[i])
}
console.log(this.items)
}
);
}
replaceIt = (str: string) => {
const regex = /\B([\#\@][a-zA-Z]+\b)(?!;)/g;
const subst = `<span style="color:blue">$1</span>`;
const result = str.replace(regex, subst);
return result;
}
HTML FILE:
<ion-card *ngFor="let item of items" >
<ion-card-header>
<ion-card-title>@{{item.username}}</ion-card-title>
<ion-card-subtitle>{{item.glyph_date}}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
{{item.glyph_content}}
</ion-card-content>
</ion-card>
I’m successfully replacing the text like I want to, however it’s just winding up as text instead actual tags and looks like this:
3 posts - 2 participants
I am trying to display a GPX file on leaflet into my Ionic Angular application by using GPX plugin for Leaflet. In VS Code, everything looks fine but when I run Ionic Serve, I get the following error : Property 'GPX' does not exist on type 'typeof import("TestLeaflet/node_modules/@types/leaflet/index")'.
Here is how to reproduce the issue :
ionic start TestLeaflet blank (select Angular and Standalone)npm install leafletnpm install @types/leaflet --save-devnpm install leaflet-gpxnpm install @types/leaflet-gpx --save-devHere is the content of the file app.component.ts :
import { Component, OnInit } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import * as L from 'leaflet';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
standalone: true,
imports: [IonApp, IonRouterOutlet],
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {
this.initMap();
}
private initMap(): void{
const options = {
async: true,
marker_options: {
startIconUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-icon-start.png',
endIconUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-icon-end.png',
shadowUrl: 'https://cdn.jsdelivr.net/npm/leaflet-gpx@1.7.0/pin-shadow.png'
}
}
const url = '../assets/gpx/rando.gpx';
const map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map);
new L.GPX(url, options).on('loaded', (e) => {
map.fitBounds(e.target.getBounds());
}).addTo(map);
}
}
So far everything is good in VS Code, but when I run Ionic serve, I get the following error :
Property 'GPX' does not exist on type 'typeof import("Projects/TestLeaflet/node_modules/@types/leaflet/index")'. [ng] 35 new L.GPX(url, options).on('loaded', (e) => {
I already tried without success :
import * as L from 'leaflet'; by import * as L from 'leaflet-gpx';import * as LGPX from 'leaflet-gpx'; and use new LGPX.GPX(url, options... which gives Property 'GPX' does not exist on type 'typeof import("TestLeaflet/node_modules/@types/leaflet-gpx/index")'What am I missing ?
Thanks for your help !
3 posts - 2 participants
Hello everyone
I am currently working on an Ionic project that requires user authentication. I’m looking for guidance on the most effective methods for handling authentication for users in Ionic, especially when connecting identity providers such as Google
Thanks in advance 
1 post - 1 participant
