Questions tagged [ionic7]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
0 answers
2 views

Ionic Mobile App Development With Live Reload Native

Is there a way to use live-reload in Ionic when developing a mobile app (iOS, Android), without going to a url in the browser? The whole idea of developing a mobile app is NOT to be run in a browser ...
pedroremedios's user avatar
0 votes
0 answers
18 views

Ionic 7 browser autoc0mplete doesn't work on input of type email or text but it does on others

I have implemented a ionic application with a login form... in the login form I have 2 inputs, the first of type email an the second of type password, tryng to use browser autocomplete by the way it ...
Nimai_Kraus's user avatar
0 votes
0 answers
91 views

Data path "" must have required property 'browserTarget'

I can't run my ionic serve because of this problem, Error_Screen_Shot Error: Schema validation failed with the following errors: [ng] Data path "" must have required property browserTarget....
Torres Clarizza DL's user avatar
0 votes
0 answers
16 views

Binding ngModel to ion-datetime button would cause unable to prase problem

I am tring to apply a ion-datetime-button in my page. In order to allow users to edit time, I want to use ngModel like this: <ion-item> <ion-label>Sleep Start at</ion-label> &...
Yiran Wang's user avatar
0 votes
0 answers
7 views

i am inserting the data but when get the data always give me null @capacitor-community/sqlite

public async insertData(data: any) { const insertDataQuery = INSERT INTO farm_add ( officer_name, resolved_by, resolved_date, resolved_details, resolved_yn, visit_date, visit_purpose, visit_type ) ...
dev Abuzar's user avatar
0 votes
0 answers
45 views

Register Ionic 7 Push Notifications Android

I'm trying to get configured Push Notifications for Android devices on a brand new Ionic app (v7). As I read in different docs and articles I did the following steps: 1.- Created my Firebase project ...
Carlos Torrecillas's user avatar
0 votes
0 answers
31 views

So I get the Error: NG0302 when I execute npm run test, but I don´t use custom pipes

So to put some context first my project is an Android app developed using Ionic 7, Angular and Capacitor. I'm doing the unit tests by "npm run test" and at the moment just making sure there ...
Abel's user avatar
  • 1
0 votes
0 answers
17 views

ble.StartNotification() on Ionic 7 not working

I am using cordova-plugin-ble-central plugin in my project. scan(), connect() and write() functions work. However startNotification() does not work. I tried to connect to the same peripheral (same ...
user14665305's user avatar
0 votes
0 answers
34 views

Supabase Realtime Subscriptions with Ionic 7 and VueJS 3 not working properly

I am building an app with Ionic 7.1.1 and VueJS 3. Apart from that I am using Supabase for my data. I am declaring my respective database / table as being realtime, as stated in the documentation. ...
localhostport80's user avatar
1 vote
0 answers
98 views

Unable to Get Ionic 7 Form to work with Angular Standalone Components

I created an Ionic 7 app with tabs and picked the option to use standalone components. I then created a new page to be used for login, but cannot find the correct combination of imports to get it to ...
Charlie Grove's user avatar
0 votes
0 answers
41 views

How to disable splash screen Ionic 7

I want to completely disable splash screen in ionic project. I use ionic 7, and it is new project with tabs. Do You have any idea how to do it? I tried many things like instaling @capacitor/splash-...
Michał's user avatar
0 votes
0 answers
95 views

Ionic 7 Swiper 11: How to set the parameter in Typescript?

I have my codes below. I wanted to set the parameters of the swiper slider using a script. <swiper-container [options]="recentPostSliderOpts" class="discover-top-banner"> &...
Shukri Damit's user avatar
0 votes
1 answer
39 views

Ionic 7 capacitor 5 internet access does not work

Ionic 7 internet access does not work. But status.connected (@capacitor/network) says true. I think android deny the connection. package.json part: { "dependencies": { "@angular/...
Torsten's user avatar
  • 11
-2 votes
1 answer
85 views

How do I get my Ionic/React app to read/load my .env file?

I'm using Ionic 7, React 18, and included dotenv 16.3. I have created a blank ionic application and have added a file alongside package.json (.env) NODE_ENV=local REACT_APP_BASE_URL=http://localhost:...
Dave's user avatar
  • 15.2k
0 votes
1 answer
27 views

Ionic - Changing line-height of ion-button

How to change the line-height of an ion-button? The documentation doesn't provide any guidance on this. I've tried various selectors without success: .row-button ion-button .row-button ion-button ...
Victor Soares's user avatar
0 votes
1 answer
32 views

Ionic Angular - Access body selector in page scope

I need to access the "body" selector in my .scss file. However, I can't access the body selector within the page scope, only in the global.scss or variables.scss files. Is there a way to do ...
Victor Soares's user avatar
0 votes
2 answers
64 views

ionic 7 @ionic-native/call-number/ngx when testing in ANDROID, returning plugin_not_installed

ionic 7 @ionic-native/call-number/ngx when testing in ANDROID, returning plugin_not_installed Added in app.module.ts file Added a function When testing in ANDROID the this.issue returning ...
Dhrubojyoti Das's user avatar
0 votes
0 answers
69 views

ngx-translate "Http failure response for /assets/i18n/... 0 OK" error on Ionic 7

The error doesn't happen on the development server (ionic serve), it occurs when I try to test the app on the device after build. My app.module.ts is: ... import { HttpClientModule, HttpClient } from '...
William Carneiro's user avatar
0 votes
1 answer
49 views

How to resolve NullInjectorError

I'm creating an app using Ionic/angular for front-end and node.js for back-end, ionic version 7 is what i'm using, i'm having issue on doing sign up page. Code below is the signup.page.ts import { ...
Ian Ducao's user avatar
  • 197
1 vote
0 answers
114 views

Swiper is not sliding in some situations

The scrolling operation is successfully from the area I marked in red. But scrolling is not possible outside the red area. I wonder what is the reason? I am using Ionic 7 Screenshot <swiper-...
yugoh's user avatar
  • 11
0 votes
0 answers
60 views

multiple ion-datetime-button and ion-datetime created dynamically inside v-for

I am trying to create multiple instances of ion-datetimeButton and ion-datetime dynamically inside the v-for with ion-buttons <ion-item v-for="(task, index) in alltasks"> <ion-...
Parvinder Singh's user avatar
0 votes
0 answers
22 views

No margin between header toolbar and content on Android preview Ionic Framework VueJs 3

i have some issue with margin between header toolbar and content. on iphone preview i just got perfect margin but when i switch to android, theres no gap between them. the header ovveride the content. ...
Mr Nobody's user avatar
  • 397
0 votes
2 answers
40 views

How to dynamically add dates to Ionic ion-datetime

I'm trying to create an Ionic calendar using ion-datetime. In it I want to mark several dates of the Month view. Those dates are retrieved through an API. The issue is here that the calendar is ...
cootje's user avatar
  • 449
0 votes
0 answers
46 views

Update notification content using @capacitor/local-notifications (5.0.6) plugin

I'm developing a workout application with Ionic 7 (ReactTS) using Capacitor. I would like to display a notification with the remaining rest time before the next set to the user. The displayed ...
G4mingEdition's user avatar
0 votes
0 answers
163 views

How to style ion-input labels on ionic 7?

I'm migrating an app to ionic 7 which encourage stop using <ion-label> for ion-input among others. In all the guides I am seeing I see how you only have to put the text in the slot of ion-input ...
daviyisu's user avatar
0 votes
2 answers
61 views

ion-item loses start padding when placed inside ion-item

I have multiple ion-input elements generated by ngFor. I have fill set to outline to place a border around it, which applies padding. When the div generating the elements is inside another div, all ...
Connor Brennan's user avatar
0 votes
1 answer
25 views

ion-datetime issue when 2 conditional values

I have a simple ion-datetime on my stackblitz and I'm trying to add a default value and min hour available. If I only have the default value in my condition: it's working well, If I only have the min ...
orphen92300's user avatar
0 votes
0 answers
62 views

ScreenOrientation in IONIC 7 and Capacitor 5.2.3

I have Ionic 7.1.1 and Capacitor 5.2.3, and I can't find on the official page how to install the screen-orientation plugin. Also, I see an end-of-life notice on the page. I don't quite understand what ...
Guille's user avatar
  • 33
0 votes
0 answers
138 views

Angular Ionic 7 Local Notification with capacitor plugin - Daily notification is not working

I have the same issue as many others here: I want to build a daily notification on which time is selected in frontend and want to execute a daily notification at the same time every day. I tried the ...
Sriram's user avatar
  • 1
0 votes
1 answer
116 views

TypeORM Error initialising the Database -- TypeError: Cannot read properties of undefined (reading 'Database')

I use TypeORM to wrap my database. In my Angular Ionic 7 app I initialise the database the following in my AppComponent but receive an error during the initialisation in the platform browser. export ...
hfs23's user avatar
  • 125
0 votes
1 answer
39 views

Property 'last' does not exist on type 'NavController'

if (this.nav.last().instance instanceof SupplierSelectPage) { this.form.controls['SupplierName'].markAsTouched(); } I have updated the Ionic version to 7, after that, I am facing issues on the ...
User User's user avatar
0 votes
1 answer
83 views

How to set up Ionic Auto Height Sheet modal in Vue 3

I am attempting set up an Ionic Auto Height Sheet modal in a Vue 3 project (https://ionicframework.com/docs/api/modal#auto-height-sheet). See my code below. On ion-tab-button #3, I added id="open-...
JS_is_awesome18's user avatar
-1 votes
1 answer
126 views

Unable to create a new Ionic project

Every time when I try to create a new ionic angular project using ionic start, it triggers an error in the console. Error: Network connectivity error occurred, are you offline? If you are behind a ...
Gabi Vieira's user avatar
1 vote
0 answers
42 views

Ionic / Cordova Plugin for querying the SSID and BSSID of the connected WiFi network without requesting location services

I am looking for a plugin for Ionic 7 to get the SSID and BSSID of the connected WiFi network. I was planning to use wifiwizard2, however it requires location services and with this I am running into ...
user14665305's user avatar
0 votes
0 answers
105 views

cdk-virtual-scroll-viewport dynamic height

I am working on a Ionic 7 application with Angular 16. In this version of Ionic, ion-virtual-scroll was deprecated and they recommend to use the @angular/cdk ScrollingModule. Ionic Virtual Scroll ...
Sergio Mendez's user avatar
2 votes
1 answer
241 views

ionic swiper does not work when conditionally rendered

i am using ionic 7 and swiper component like below <ng-container *ngIf="core.loggedIn === true"> <swiper-container #swiper (afterinit)="swiperReady()" [pagination]=&...
Moblize IT's user avatar
  • 1,088
0 votes
0 answers
71 views

Alternative for displayFormat property for ion-datetime in Ionic 7

In Ionic 5 it was possible to customise time formats of ion-datetime using the property displayFormat. eg. <ion-datetime displayFormat="HH:mm" .... In Ionic 7 this does not seem to be ...
user14665305's user avatar
0 votes
1 answer
108 views

How do I unit testing for Ionic Capacitor Status Bar?

I run my unit testing and I got Error: "StatusBar" plugin is not implemented on web Currently this is from my app.component.ts loadTheme = (theme) => { if(this.platform.is('capacitor')...
MensinBM's user avatar
0 votes
1 answer
52 views

I can't root my components in an Angular project with Ionic

I'm using Angular 16.0.0 and Ionic 7.0.0 Error: NG04002: Cannot match any routes. URL Segment: 'home' I try navigate to my 'home' component, I'm using: this.router.navigate(['/home']); But it isn't ...
Brandon Ruben González Ramirez's user avatar
0 votes
1 answer
290 views

How to Use Capacitor Google Maps Plugin with Ionic 7 Modals

No matter how much I try to hide HTML elements, make them transparent, not visible o not display them at all, I haven't found a specific way to make the HTML elements transparent enough to use ...
BarBarBinks's user avatar
-1 votes
1 answer
714 views

how to set up SQLite database using capacitor for ionic application with angular?

I am using the Ionic framework with Angular and Capacitor to build a chat application. I want to implement storage in my application. I am trying to set up an SQLite database for my Capacitor project. ...
Mahima's user avatar
  • 9
0 votes
0 answers
14 views

Different Menu for Different page in Ionic

My first-page wont respond and scroll as my second-page menu is overlaying its hidden menu I'm trying to add a menu for my staff page for a different page, I tried copying the existing menu and ...
Angelo Dionisio's user avatar
1 vote
1 answer
61 views

Unknown html tag ion-breadcrumbs, the tag is not recognized by ionic-angular project

ionic breadcrumbs doc <ion-breadcrumbs> <ion-breadcrumb href="#home">Home</ion-breadcrumb> <ion-breadcrumb href="#electronics">Electronics</ion-...
sahan madusanka's user avatar
0 votes
0 answers
175 views

Ionic 7 viewer and pdf generator plugin

Which plugin to install to preview and download the PDF, and use with ionic 7, I tried cordova-plugin-printer and it is giving conflicts with the dependencies version, which one to use with ionic 7? I ...
Kaio Amorim's user avatar
0 votes
2 answers
230 views

angular fire auth with ionic 7 causes NullInjectorError: No provider for InjectionToken angularfire2.app.options

I am using ionic 7 and angular fire for authentication using firebase. Lot of code on the internet uses older way of app.module.ts which is no longer the way. So, i created a new firebase.module as ...
Moblize IT's user avatar
  • 1,088
1 vote
1 answer
271 views

ion-datetime-button in ion-item not 100% height

I have 3 ion-items with ion-select and ion-datetime-button. The ion-items with ion-datetime-button do not have the same height as the one with ion-select. They are all wrapped in an ion-col (with the ...
Felix's user avatar
  • 39
0 votes
0 answers
129 views

slideTo(1) is working but slideTo(0) is not working with swiper js using ionic 7 + Angular

Below is working <swiper-container id="swiper" (transitionstart)="slideTransitionStart()" #swiper> <swiper-slide *ngFor="let image of bannerList"> ...
Chirag Bhadani's user avatar
0 votes
0 answers
162 views

IonInput fill outline property

I am having trouble implementing IonInput in outline style. I need to point out that the outline appears for a while but then disappears for good. I also need to mention I am not using it inside of ...
vladissick's user avatar
1 vote
1 answer
251 views

Error: Unable to create photo on disk on Android - Ionic using Capacitor Camera Plugin

I am trying to use the Capacitor Camera Plugin in Ionic (v7) for an Android App (have not tested in iOS, but no issue on Web). This is the code to get the image: const image = await Camera.getPhoto({ ...
BarBarBinks's user avatar
1 vote
0 answers
192 views

How to fix 'Unable to start the daemon process' error when running ionic capacitor on Android studio?

I am trying to run an ionic-angular app on android studio When running ionic capacitor run android i receive the following error : [capacitor] [error] Starting a Gradle Daemon, 7 stopped ...
Souhail AIT SAID's user avatar