Questions tagged [ionic4]

I have been attempting to create a playlist of multiple audio files using the Ionic media plugin from here. However, I am struggling to achieve this without resorting to using a timeout function. Here is my current approach: playOne(track: AudioFile): Pr ...

I am currently developing a multilingual Ionic 4 app and have implemented the alert controller to display language options. However, I am facing an issue on how to dynamically change the language based on user selection. Below is my app.component.ts code ...

I am struggling with handling async requests in Angular within Ionic4. I have successfully loaded a .json file and saved it into an array, but when trying to edit the array within a loop, my promise resolves before the loop finishes. As a newcomer to Angul ...

I'm having trouble figuring out how to repeat my component multiple times using react in Ionic. Can someone assist me with this? Here's an example: In my Component.tsx file, I have the following code: import React from 'react'; import { IonCard, IonCardCo ...

As a newbie to Ionic, I recently delved into the world of Ionic 4 by following the guidance provided in the Ionic 4 documentation. After setting up my project using ionic start myApp sidemenu --type=angular, I noticed that everything ran smoothly on my bro ...

I'm attempting to create a modal window that utilizes a radio group. When a user selects a value from the radio group, I want the modal to return the selected object. Here is the code for the radio group page and HTML: export class PopoverstationsPage im ...

Seeking guidance on changing labels in an Ionic/Angular app from 0, 1, 2 to Profile, Group, and Friend. Despite utilizing resources like Google and YouTube, I've struggled for days to make this adjustment without success. Any assistance would be great ...

Currently, my project involves using Ionic 4 in combination with Angular. I am facing a challenge where I need to play an audio file (mp3/wav) when an image is clicked. Despite working on this for a week, I have been unable to figure it out. Can anyone pr ...

I'm having trouble centering an ion-item and it seems slightly off-center. The standard methods like text-align: center and adjusting padding in ion-content don't seem to be working for me. Can someone please assist? https://i.stack.imgur.com/QZ ...

I'm currently developing an application that necessitates the user to be in close proximity to a specific GPS location. At present, I am obtaining their location every 30 seconds, transmitting it to my server, checking if they are near the desired location ...

I'm having trouble uploading images to Firebase. Can anyone offer assistance? Does anyone know how to upload images to Firebase in Ionic 4.0? The code below used to work in Ionic 2, but now there's a delay of about 30 seconds after clicking the ...

https://i.stack.imgur.com/OHL0A.png I attempted to access the following link http://jsfiddle.net/jlspake/v2L1ny8r/7/ but without any success. This is my TypeScript code: var viewModel = function(data){ var self = this; self.orders = ko.observableArr ...

Looking to set up an ion-select menu in Ionic4 where users can pick a value between 20 and 220 without manually typing each number. I attempted to use the approach detailed in this post Tersest way to create an array of integers from 1..20 in JavaScript ...

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

Looking for guidance on the installation process of Ionic 4 on Ubuntu 18.04. Can anyone advise on the compatible versions of npm, Node.js, Cordova, and Android SDK required for a successful installation? I attempted the installation myself but encountere ...

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 ...

Issue with button logging on second click instead of first, skipping object iteration function. I attempted using promises and async await on functions to solve this issue, but without success. // Button Code const btn = document.querySelector("button") ...

async displayNotification() { const notification = await this.notificationController.create({ header: 'Notification', subHeader: 'Additional Info', message: 'This is a notification message.', button ...

Currently, I am working on an Ionic 4 app for both Android and iOS platforms. The issue I am facing is that only SVG format images are displaying in the slide menu, even though I have images in both SVG and PNG formats. public appPages = [ { ...

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 ...

After updating npm today, I noticed that many Ionic icons from ionicons.com were returning a 404 error. I came across a workaround which involved modifying the angular.json file. However, I am concerned about encountering the same issue (and potentially ot ...

Currently, I am working on an Ionic 4 project where I am attempting to retrieve a JSON array from a URL using the native HTTP for Ionic. However, when I attempt to fetch the data array from the URL in JSON format, I am met with an empty page. The JSON dat ...

I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...

I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...

The content extracted from a .ts file is being displayed on the home.html page. I am aiming to display only the initial 15 characters followed by 3 dots (...). Despite my efforts, the following code snippet is not functioning as expected: home.html < ...

Looking for assistance with client-side code development! I am currently working on an Android application using Ionic that involves live cricket scores. I have purchased a cricket API and understand how to connect to it using Node.js on the server side. ...

I have been working on a simple Ionic 4 Angular app and I am using an Ionic popover modal. The code below shows how I open the popover modal in my application: //home.page.ts async openModal(ev: Event) { const modal = await this.popoverController.create({ ...

I have a straightforward routing setup like the following: import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'scenario', ...

Having trouble integrating a javascript/css slideshow into Ionic. Ionic does not support the use of ".style" in elements. Need assistance, below is the code: <head> <title>Slideshow</title> <style> .slides {display:none;} </styl ...

I have been actively monitoring the GitHub repository for the Ionic Native SMS plugin at https://github.com/cordova-sms/cordova-sms-plugin. Following the suggested configuration from the repo, I have set it up as follows: var options = { repla ...

I'm developing an Ionic 4 app with Angular and looking to incorporate Up and Down Arrow buttons for vertical scrolling from top to bottom and vice versa. ...

Having an issue with updating stock data on the view in my ionic 3 project. I am able to see frequent updates in my component and console, but these changes are not reflected on the view as frequently. For every 10 updates in the component, only 1 update i ...

Below is an example of the json I have: [{"id":"1","date":"2020-02-21","status":"present","studentid":"1"},{"id":"2","date":"2020-02-24","status":"present","studentid":"1"}] I am struggling to store the date in a variable using Angular when it is being s ...

After successfully retrieving JSON data, I am facing trouble displaying the value in my template. It seems that something went wrong with the way I am trying to output it compared to others. My function looks like this, getUserInfo() { var service ...

I am currently working with a list that displays various information, along with an image search function in an img tag that looks for a specific image related to the information. However, some of the information does not have a corresponding image and I w ...

How can I retrieve the values of a token and user id that are stored in Ionic storage? Currently, I have implemented the following: auth.service.ts getToken() { return this.storage.get(TOKEN_KEY); } getId() { this.storage.get(ID); } crud.serv ...

In my Ionic app, I have integrated a feature to display flight schedules using a JSON data API. The goal is to notify users through a bell icon about the status of the flight, whether it's arrival, delay, or landed. To achieve this, I have installed Local ...

I'm working on an Ionic project where I need to implement a button that displays items when clicked, and hides them when clicked again. However, using ShowDisplay() with *ngIf doesn't load anything. Is there a way to modify my DisplayF1() function so it in ...

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across a sug ...

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 ...

Struggling with understanding RXJS Observables and pipes. The API response structure is as follows: { "_embedded": { "users": [ { "id": 1, "username": "steve" } ] } } Here ...

While there are plenty of examples demonstrating how to draw on a canvas, my specific problem involves loading a photo into memory, adding a shape to exact coordinates over the photo, and then drawing/scaling the photo onto a canvas. I'm unsure of where to ...

I have a button that toggles between map view and list view <ion-content> <ion-segment #viewController (ionChange)="changeViewState($event)"> <ion-segment-button value="map"> <ion-label>Map</ion-label> & ...

Created a Page using Ionic 4 based on Angular, incorporating Angular routing with guards for access management. The data is retrieved from an APIRest built with Express JS. After publishing the site online, encountered an issue where certain routes in Io ...

I have a news application built in Ionic 4. The pubDate property of the UutinenPage class is being asynchronously assigned a value of data.items[this.id].pubDate in the uutinen.page.ts file. The expected format of this value is something like 2019-02-19 04 ...

I have a project using Angular along with Ionic 4. I encountered an issue where the Ionic Lifecycle Hooks in the child page do not fire when it is called from the parent page's HTML using the HTML Selector. Why does this happen? How can I properly utilize ...

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 ...

I need assistance in incorporating jQuery functions into my Ionic 5/Angular 9 project. In order to access some of the functions, I have included the necessary files in the angular.json file and installed Jquery and Bootstrap through npm. However, I am un ...

When trying to download ionic/cli-plugin-proxy while behind a proxy server, I encountered the following error: npm install -g @ionic/cli-plugin-proxy npm ERR! code E500 npm ERR! 500 Internal Server Error: @ionic/cli-plugin-proxy@latest npm ERR! A complet ...

When running "ionic capacitor run android" in my Mac terminal, I can manually click the play button in Android Studio to view the application with its updated code changes. On the other hand, if I use "ionic capacitor run android -l" in my Mac terminal, t ...

Currently working on an angular ionic project and I'm looking to personalize the design of the ion-searchbar. In the default template, the search bar icon is positioned on the left side. My goal is to adjust the placement of the icon and have it situated ...

After following a tutorial on Smashing Magazine about creating a new Vue project with Ionic and Capacitor, I added the necessary dependencies using yarn. However, when trying to run Electron with 'yarn run electron:start', I encountered a net::ERR_FILE_NOT ...

I recently made changes to my routes by switching them from lazy loaded using a string reference to lazy loading through a call to import. However, I am facing an issue where every time I try to navigate to one of the pages, I encounter the following erro ...

I am a beginner in the world of Ionic/Angular. On my edit profile page (which is a separate page), I have the ability to change my profile picture. When I make this change, it should automatically reflect on my main profile page, which is on another page. ...

How can I access the data I need from an API when it is nested within multiple objects? I am attempting to retrieve the full_url from the data object, which is nested inside the avatar object. I have already attempted the following: <ion-list> ...

In my Ionic project, I have implemented a side menu in the app.html file that is accessible throughout the entire application. This menu contains items with links that need to be opened externally. However, when trying to open them using InAppBrowser, an e ...

I am working with a JSON object that looks like this: { "commands": [ { "command":"begin ${{password}}", "name":"Initialization", "description":"Send SMS begin+password" } ] } How can I dynamically pass data to ${{password}} ...

Currently using Ionic 5 and attempting to retrieve the IP address of the client user to include it in a URL. Here is my code: this.ipclient = this.httpClient.get("https://api.ipify.org/?format=json"); this.ipclient .subscribe(ipclient => { console.log( ...

My menu is set up with headings and subheadings. When I click on the headings, it expands to display the corresponding subheadings, but it automatically collapses when clicking on the headings. I want it to stay expanded when clicking on the headings. He ...

Having some trouble with an Ionic 4 project code that works perfectly on my Mac but encounters an error when I try to run it on my Windows 10 PC. The specific error message states "Cannot find module '@angular/core/package.json'". Interestingly, ...

As I work with the Ionic Native plugin for image uploading using S3 signed URLs, I am encountering an issue due to the camera plugin generating images in base64 format. This is causing difficulties when trying to upload them in the correct format. takePho ...

I am currently working on an Ionic app that enables users to upload images to Firebase storage. One issue I am encountering is that the image only changes once a new one is selected, after closing and reopening the app. I would like it to update immediatel ...

I am currently developing a mobile app using Ionic 4 where I need to store various labels and arrays in an associative array. However, I am encountering challenges when it comes to initializing the array, adding new items to it, and updating existing ones ...

After searching through the official documentation, I couldn't find a solution. I am in need of a function similar to the jQuery datepicker beforeshowday function. My goal is to disable all weekends (Saturday and Sunday) in upcoming dates so that users a ...

Form.html <form [formGroup]="myForm"> <ion-button [(ngModel)]="isActive"(click)="onClick()" >Add</ion-button> <ion-item> <ion-label position="floating">First Name</ion-label&g ...

Greetings from the Apple team, It has come to our attention that there are certain issues with your recent app delivery for "Project 66" version 0.0.9. Your delivery was successful, however, we advise you to address the following problem in your upcoming ...