Questions tagged [ionic-framework]

Ionic, a cutting-edge front-end framework, empowers developers to create exceptionally intuitive hybrid mobile applications using the combined prowess of HTML and Sass. Originally designed for use with Cordova and Angular, Ionic 4 introduced support for Angular, React, Vue.js, and Web Components, all running seamlessly on top of either Cordova or Capacitor.

Guide on sending a push notification using "npm request" to the Ionic API

I attempted to send a push notification through the Ionic API using "npm request". Here is my code: var request = require('request'); var token = '................'; var title = escapeJson('title 123'); var message = escapeJson('message 123'); var req = ...

Switching slides in Ionic 4 with a simple button click

I want to switch slides by clicking a button on my presentation. Here is an example code snippet: <ion-slides> <ion-slide> Slide one <ion-slide> <ion-slide> Slide Two <ion-slide> </ion-slides> <butt ...

I'm having trouble getting my Ionic Angular App to start up properly. When I try to launch it, it just gets stuck on the splash screen and displays an error message saying "ReferenceError

The challenge I am facing involves developing an IOS app using ionic v7 and angular v15.2. While the app functions smoothly in the browser, upon deployment to my iPhone (iphone 13 pro, running IOS 15.6), I encounter a perplexing error message within XCode: ...

Reorganizing Firebase data in Ionic 2

I am currently working on an exciting project to develop an Ionic notes application, where users can easily rearrange items in the list using the reorderArray() function. However, I encountered an issue with Firebase resulting in an error message related t ...

Issue with Stenciljs custom event not triggering using @Listen decorator

I've been trying to grasp the workings of the custom event emitter. While my mouse events seem to be functioning properly, I'm encountering issues with the custom events. Despite emitting correctly, it appears that the listener is not capturing t ...

The controller in AngularJS fails to function properly after the initial page refresh

I am currently utilizing AngularJS in my hybrid Ionic application. Here is my controller: .controller('SubmitCtrl', function($scope) { console.log("It only works when the page is refreshed!"); }); The console.log function runs perfectly fine ...

The current directory does not belong to a Cordova project

Upon executing ionic cordova run browser --verbose within the main directory of my Ionic4 project, I encounter the error message "Current working directory is not a Cordova-based project." as shown below. I've observed that the command generates a "www" f ...

Exporting Arrays in Ionic Angular with Typescript is an essential feature

When trying to access an exported component in Typescript, there may be issues with importing the module correctly into another component. An error message is displayed when calling the AddToArray method: Cannot read property 'push' of undefi ...

Incorporating a filtering search bar in Ionic React to efficiently sort pre-existing lists based on their titles

Struggling to implement a search bar in my Ionic application has been quite challenging. I've searched for examples and tutorials, but most of them are based on Angular with Ionic. The React example in the Ionic docs didn't provide much help either. Just l ...

Challenges encountered when sending an HTTP post request in Ionic 2 with Angular 2

Whenever I try to make a post request in my ionic2 application, I encounter an error without any specific message. It seems like there is something wrong with my Angular2 post request. Below is the function I am using for the request: load(username, pass ...

Update the nested radio button to a new value

I have a series of radio button lists generated using ng-repeat. I've managed to capture the selected item successfully. Now, I am attempting to set the default value for the radio buttons. Could someone please provide assistance? Below is my code sni ...

How can one eliminate the white space surrounding the data that Vue is binding?

Working with Vue, I've noticed a gap on the screen following the data binding. Instead of using Vanilla JavaScript's trim() function, is there a way to remove leading and trailing whitespace? Let me provide you with the code for the data binding process. ...

Establish a connection between two ionic and angular applications using a node server

Currently, I am managing two Ionic applications that both interact with the same API hosted on a node server. My goal is to enable one app to send a post request and have the other app receive and utilize the information from that request. I was consider ...

Angular: Display error message only after user attempts a search, then clear it once results are shown (?)

I'm facing a minor issue that I successfully resolved in a web app. However, the same issue has arisen in a mobile app, and the solution isn't as straightforward this time. Check out this video for reference Upon logging in, users are greeted with a bann ...

What is the best way to distinguish between the app ID and version in Ionic framework?

I successfully launched an application on Android using the ionic framework. Now, I am preparing to launch the app on iOS as well. In order to do this, I need to obtain the specific id and version for both iOS and Android separately. The snippet from my ...

Retrieve the item that is contained within a separate item within the original

Is there a way to access the Photos object in my code? I attempted to use {{ item.image.Photos[0].image }} but it was unsuccessful https://i.stack.imgur.com/IGC2c.png Looking for Assistance with TypeScript listHotelPhotos( hotel_id ){ let loader = t ...

JavaScript Date() function misinterpreting Unix timestamp

When creating the date using a timestamp retrieved from Firebase, I use the following code: let da = new Date(item.date.day); I have double-checked that item.date.day is indeed a timestamp and the correct one at that. However, regardless of the actual t ...

Jest tests are failing to render React IonDateTime component

While executing Jest on an Ionic React component, I encountered a test failure consistently, regardless of whether the component had a time value or not. test('IonDateTime display', () => { render(<IonDatetime data-testid="foo" ...

Issues with Await and Async functionality in Angular and Ionic 4 causing unexpected behavior

Struggling to show error messages during the sign-up process? Constantly encountering the same issue in your code? The error TS1308 is throwing you off: 'await' expression is only allowed within an async function. Take a look at this problemati ...

Using the Capacitor plugin for Firebase Auth, log in to Azure AD B2C with Ionic/Angular

I have been trying to authenticate with Microsoft using a Capacitor plugin, but I haven't had any success so far. I carefully followed the instructions in this documentation and made sure everything is well configured. Could you please guide me on where ...

Unable to call Ionic component function using ref in Vue3

I'm attempting to utilize the closeSlidingItems method of the IonList element in order to automatically close the sliding item after clicking a button that appears from behind once the item is slid to the right. My approach involved referencing IonList an ...

Issue with retrieving all phone numbers from a contact in Ionic

Hope you're doing well! I'm encountering an issue with Ionic Contacts. Currently, I'm able to retrieve all the contacts using my code but I need help extracting all the phone numbers associated with each contact. For example, if John has 3 phone numbers, ...

Creating a dynamic 2x2 grid with centered responsiveness in Angular Ionic framework

I'm having trouble achieving a 2 x 2 grid that is centered on my screen. The code snippet below shows what I have so far in the HTML file. Just to provide some context, this project is meant for a native mobile application. <ion-header> <ion-to ...

Troubleshooting: Data retrieval issues in AngularFire within Ionic and Angular Application

I am encountering errors and facing issues with data retrieval in my Angular and Ionic application when using AngularFire for Firebase integration. Here is a snippet from my package.json file: "dependencies": { "@angular/common": "5.0.3", "@angul ...

Alerts created with the AlertController in Ionic 4 Angular are not displaying the message when the

After creating a reliable alert service for my Ionic 4 project, I encountered an issue when building the release version of the app. Despite functioning perfectly in other environments like "ionic serve" and "ionic cordova emulate", the message part of the ...

Having trouble installing Ionic?

Can someone please help me with my installation issue regarding Ionic? I've tried installing it with admin rights, but still facing problems. My installation steps are as follows: npm uninstall ionic -g npm uninstall cordova -g npm cache clean npm ...

Having difficulties viewing the sidemenu icon on Ionic 3, despite enabling the menu through MenuController

I am trying to show the sidemenu icon on my Home page, which users can access from the Add-Contract page. Even though I have enabled the sidemenu in home.ts using this.menu.enable(true);, the icon is not visible. However, I can still swipe and access the ...

Creating a welcome screen that is displayed only the first time the app is opened

Within my application, I envisioned a startup/welcome page that users would encounter when the app is launched. They could then proceed by clicking a button to navigate to the login screen and continue using the app. Subsequently, each time the user revisi ...

Steps for adding a checkbox to an alertController in Ionic 4

Currently, I am working on Ionic 4 and my goal is to create a checkbox field within the Alert Controller that pulls its options from an array of objects. However, when implementing the code, I am only able to see one checkbox instead of having multiple che ...

The constant increase in page header number leading to minor interruptions during page scrolling

On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...

What is the method for opening the image gallery in a Progressive Web App (PWA)?

I am struggling to figure out how to access the image gallery from a Progressive Web App (PWA). The PWA allows me to take pictures and upload them on a desktop, but when it comes to a mobile device, I can only access the camera to take photos. I have tried ...

An issue occurred while trying to execute the `ionic serve` command, and the result of

Facing an issue with the ionic serve command - I keep getting the error message "Hmm, we can't reach this page" and when attempting to view the result of the ionic address command, there is no output. Any assistance in resolving this would be greatly app ...

The formBuilder controls' setValue() and patchValue() methods are not functional when called within a method of a Cordova plugin

In developing my Ionic tabs app, I have integrated the cordova-plugin-datepicker and utilized Angular Material to design the form fields. One issue I encountered is setting the text input's value with the date obtained from the plugin’s calendar in the ...

Is there a way to automatically close the InAppBrowser once certain content is displayed?

Is there a way to automatically close the $cordovaInAppBrowser when it loads my website and retrieves the content "OK"? My goal is to hide the close button in the browser window. Any suggestions on how to accomplish this? ...

PhpStorm is unable to resolve the @ionic/angular module

I have encountered a peculiar issue with my Ionic v4 project. While the project runs smoothly, PhpStorm seems unable to locate my references to @ionic. https://i.stack.imgur.com/umFnj.png Interestingly, upon inspecting the code, I realized that it is act ...

Issue encountered with Ionic and ssh2: process.binding is not supported

I am currently delving into the world of Ionic and experimenting with creating a basic application that utilizes SSH2 to establish an ssh connection between the app and a server. Here is a breakdown of the steps I took to encounter the issue: Steps to Rep ...

Selecting multiple items from a grid using the Ionic framework

I am looking to create a grid of category images in Ionic framework, where users can select multiple categories and send their values to the controller. However, I'm unsure about how to make this happen with Ionic framework. Below is the view I currently ...

Transmitting MQTT information through an application programming interface

In my project using Ionic React, I am developing an application to showcase temperature data. To achieve this, I have established an API that transmits MQTT temperature information and utilize Axios for data retrieval. Despite my efforts, I am encountering ...

Utilizing AngularJS to retrieve associated information from users via a JSON API

I'm currently utilizing the Ionic framework and my inquiry relates to AngularJS. I've set up a JSON API using Ruby on Rails and for authentication, I've opted for ng-token-auth + devise-token-auth. User JSON: { "data": { "id": "1", "type": "us ...

`local data erasing in Ionic app on both iOS and Android devices`

I am in the process of developing a mobile application with a backend server built on Rails. The main concept is that upon successful user sign-in, the server sends back a unique token along with their user_id. These two pieces of information are stored in ...

The message "In Angular, there is no such property as 'data' in the type '{ user: User; session: Session; error: ApiError; }'."

Here is my complete supabase.service.ts code: import { Injectable } from "@angular/core"; import { createClient, SupabaseClient, User } from "@supabase/supabase-js"; import { BehaviorSubject } from "rxjs"; import { envi ...

Even when my app is closed, I am unable to receive FCM Push Notifications. This issue persists in Ionic 3 and

Hello everyone, I'm excited to make my debut post on this site. Please forgive any mistakes in following the rules as I am still learning them. I need some help with an issue regarding notifications in an app I developed using Ionic 3 and Angular. De ...

Title positioned between two buttons in the header

I am trying to add two menu buttons in my header, but the Hamburger menu button is not aligning to the left as expected. Currently, it looks like this: https://i.stack.imgur.com/s5ptT.png Below is the code snippet I am using: <ion-header> <io ...

Ionic Error: Module 'dezalgo' not found

When attempting to integrate the ios platform into my project for XCode development, I executed the command: ionic cordova platform add ios However, the following error occurred: ionic cordova platform add ios > cordova platform add ios --save module. ...

A guide on incorporating ng2-canvas-whiteboard into your Ionic 3 project

I'm trying to implement the npm package ng2-canvas-whiteboard into my Ionic 3 app. I followed all the instructions on the npm page and here is my package.json: "dependencies": { "@angular/common": "4.0.2", "@angular/compiler": "4.0.2", ...

Guide on activating a service in one component to close a pop-up in a separate component [angular]

In order to manage navigation in our app, we have chosen to utilize the Angular router instead of the Ionic navigation controller. One challenge we are facing is handling navigation using the Android back button. When working with the Ionic framework, pre ...

Tips for resetting the ngrepeat index within a modal

I have a group of elements, each with its own attached gallery. I've implemented a modal to display the gallery for each element, and it's functioning flawlessly. However, I'm encountering an issue with the initial pictures that are displayed. For example ...

Ionic retrieves a filtered array of JSON data

Having difficulty filtering the array to retrieve values where the parent id matches the id that is provided. For instance, if an ID of 1 is sent, it should result in a new array with 3 items. An ID of 4 will return 1 item, and an ID of 5 will also return ...

Preventing exit in Ionic application for PhoneGap/Cordova development

I'm developing an application and I want to restrict access to users who are unfamiliar with it. Is there a way to accomplish this? The only solution I found so far is blocking the back button functionality... Appreciate your help! ...

Issues with Ionic Toggle displaying incorrect value

I created a basic test using an ionic toggle, but I'm encountering an issue where my alert returns False when the toggle is set to True and True when it's set to false. Any suggestions on how to fix this? http://codepen.io/anon/pen/jtKCf $scope.pushNot ...

What is the process of creating a sequence using IONIC and an angularjs controller?

I'm facing a problem with the sequence of alerts in my code. Here is how I have implemented it: .controller('ulpCtrl', function($rootScope, $ionicPopup, tanyaService, $state) { $rootScope.getKat = 'UL'; // The method to execute on Ulp ...

Issue: Unhandled promise rejection: SecurityError: To use screen.orientation.lock(), the page must be in fullscreen mode

While attempting to change the orientation of one of my pages in an Ionic 3 app, I encountered the following error. The code snippet below was used to change from portrait mode to landscape mode: ionViewDidEnter() { // this.statusBar.hide(); // // ...

Issues with Ionic App and Sails JS Socket Client Connecting

Currently in the process of developing an Ionic App for Android using crosswalk wrapping. I am utilizing the Sails JS socket client SDK. An issue arises when I launch the app on a real device without connectivity to the server, resulting in a successful la ...

Utilizing Angular to intercept AJAX requests, verifying internet connectivity before proceeding with sending the request

In my Angular (with Ionic) app, I have this code snippet: my_app.factory('connectivityInterceptorService', ['$q', '$rootScope', function ($q, $rootScope) { var connectivityInterceptorServiceFactory = {}; var _request ...

Having difficulty showing the ionic back button within my side menu

I recently added an ion-nav-back-button to my side menu in the ion-nav-bar, but I encountered an issue where the nav back button did not display. Despite trying various attributes, the button remains hidden. Below is the code for my menu layout with the si ...

Max call stack size exceeded error encountered and logged without catching

While attempting to display multiple markers on a Google map within the Ionic framework, I encountered an Uncaught RangeError: Maximum call stack size exceeded error message in the log. The issue seems to be related to the Cordova Google plugin that I am ...

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

Utilizing import for Ionic3 to export const with logic

While developing an app using ionic3, I encountered an issue with setting up a proxy. When running in a browser, Ionic was able to recognize the path of my proxyUrl as shown below. ionic.config.json { "name": "myApp", "app_id": "", "v2": true, "t ...

Clicking on ng does not trigger the function on its own

Seeking assistance in refreshing a captcha code by clicking on a button. However, the function itself is not being triggered. Is there something missing? Here is the snippet of my controller.js code: $scope.goCaptcha = function() { console.log('entered'); ...

Tips for updating ion-select option to correspond with the object by utilizing the object's identifier as the value

In my code, I have a select element that looks like this. <ion-select formControlName="location" (click)="clearSectionAndTask()"> <ion-select-option *ngFor="let location of locations" value="{{location.locationId}}"> ...

Using Ionic with Ubuntu to easily connect to MySQL and PHPMyAdmin

element, My current project involves creating a mobile app using Ionic on Ubuntu. I have successfully installed and configured phpmyadmin, which is now operational at http://localhost/phpmyadmin. Can someone guide me on how to configure Ionic to connect ...

Using Django with Ionic and ng-Cordova for efficient file transfer

Working on an exciting project with an Ionic hybrid app, I've come across a challenge regarding the feature of taking/choosing a picture and uploading it to the server. While there are numerous examples available for using the $cordovaFileTransfer plugin ...

Swipe to modify Array

Currently, I am in the process of developing an application that features a Swipe card interface using both AngularJS and the Ionic framework. The functionality of this app will be similar to the one found at . When swiping to accept a card, I want the ar ...

Struggling to implement the proper authentication method with API in Ionic

Having an API for the login, but being new to Ionic is causing difficulty in creating the correct method for the login process. The service file is located here: providers/restapi/restapi.ts import { HttpClient } from '@angular/common/http'; import { Inj ...

Is there a way to add a sub-heading into the side menu?

We are currently developing an application that utilizes ngCordova and we want to implement a side menu feature. The side menu has already been set up and you can see it below. https://i.stack.imgur.com/fiv39.png After adding the subheader, this is how t ...

registering a back button action in Ionic2 for multiple pages

Currently, I am in the process of developing my Ionic2 app and have encountered a dilemma regarding the functionality of registerBackButtonAction. On one page, let's call it pageA, I have implemented this function and everything is functioning as expected ...

Utilizing form inputs for uploading images in Ionic framework

I have a platform wherein users can fill out a form and upload a single image before finalizing their submission. Now, I am attempting to replicate the same functionality using the Ionic framework. Here's my progress thus far: 1. Installed ngCordov ...

Learn the steps to extract information from a specific ID on a webpage using Firebase

I am facing an issue with retrieving information from my Firebase database in Angular. As a beginner in both Angular and Firebase, I'm not sure how to achieve this. Below are the relevant code snippets: Address list HTML <ion-card *ngFor="let item of ...

[ERROR] There was a problem encountered during the execution of the ionic-app-scripts subprocess

I encountered an error while running my Ionic project. Below is the error message: [ERROR] ionic-app-scripts has unexpectedly closed (exit code 1). The Ionic CLI will exit. Please check any output above for error details. ionic3-firebase-shopping-car ...

"Mapping without limits: Ionic's Offline Map feature

Currently, I am in the process of creating a hybrid mobile application with Ionic. The app has been fully developed, but now I need to incorporate an offline Google map feature. My goal is to capture the latitude and longitude of the user when there is n ...

Angular 2 form controls featuring custom display names and unique values

As I work on developing a form, I have encountered the need to display something different than the content itself. Here's what I currently have in my code: <ion-label>Rate</ion-label> <ion-input text-right detail-push formContro ...

When converting a .ts file to a .js file using the webpack command, lengthy comments are automatically appended at the end of

As a backend developer, I recently delved into UI technologies and experimented with converting TypeScript files (.ts) to JavaScript files (.js) using the webpack command. While the conversion works well, the generated .js file includes lengthy comments at ...

What is the best way to display two columns in each row using Angular?

Can you please provide guidance on how to display two columns in each row using Angular? I am attempting to showcase only two columns per row, and if there are more than four items, I want to display them on an ion-slide. Further details will be provided. ...

Required Ionic form field alert

Currently, I am developing a new app using ionic 3 and I am facing an issue with making inputs mandatory in my ionic-alert controller. Despite going through the ionic-component documentation and api documentation, I couldn't find a solution on how to ach ...

The silent button malfunctioning - Ionic

Within the html file: <video preload="metadata" muted="true" controls playsinline webkit-playsinline loop> Despite the "muted" tag, the video is playing with sound in both the browser and on the device. After referencing the video and setting the ...