Is there any way to apply a rounded border on the bottom of an ion-toolbar or ion-header? Applying a border-radius property to either element seems to have no effect. If anyone has any tips and/or ideas on how to create this effect that would be much appreciated!
1 post - 1 participant
Hi im new to ionic and angular a lot of things i still didnt know, i want to send post request to api with basic auth. heres my code :
import { Component } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http'
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(public http:HttpClient) {
this.call();
}
call(){
var data = {username:"someusername",password:"somepassword"}
let body = JSON.stringify(data);
let header= new HttpHeaders({
'Accept': 'application/json',
'Method': 'POST',
'Content-Type': 'application/json',
'Authorization':'Basic ZHJlYW1fMS4wOmRyZWFtXzEuMA==',
});
let options = {headers: header}
this.http.post("someUrl", body, options).subscribe(data =>{
console.log(data)
}, error => {
console.log(error);
});
}
}
im following tutorial from this link : “Ionic 5 HTTP POST with Angular by Example | Techiediaries”, but look like im using the new version ionic, so i change a bit by following this post “angular6 - angular 6 or 7: How to import RequestOptions and ResponseContentType in '@angular/common/http' - Stack Overflow”. but i get error like this:
then i realize, look like my headers not added to the url. here the image from consolelog.(option) header i declare :
and heres image from console.log(error):
so my question is, how to add header i declare to the url ?, is the header added to url will solved this problem ?, or maybe i miss something ?.
thank you in advance, and sorry for bad grammer english.
4 posts - 2 participants
Arcadia is a leading brand in its domain and has been serving its customers with multiple Mauritius packages that come with both honeymoon and leisure benefits. You can explore our different Mauritius Tour Packages for Couples with details like hotel information, itinerary, inclusions, and exclusions. That way, you can plan accordingly, save on extra costs, and simply adore the aesthetics of Mauritius.
1 post - 1 participant
Hello!
Ionic 6 + capacitor 3 app.
The push notifications are working well in my app, tough I have one “problem”:
in my code I have this section:
PushNotifications.addListener(
'pushNotificationActionPerformed',
async (notification: ActionPerformed) => {
const data = notification.notification.data;
if (data.internalRoute) {
this.routingService.navigateByUrl('/' + data.internalRoute);
}
}
);
If the app is running, everything works as expected otherwise, the first time I get a push notification it just open the App and only after this (doesn’t matter if the app is now running in background or foreground) if I send a new push notification, it navigates to the chosen route. (basically, it goes to the route only if the app is “loaded”)
I think it doesn’t work because that fragment of code is being executed while the app is not completely “running”, so it does nothing.
There is any way to translate my code in something like
**Wait for the app to be completely "awake" and only then execute this:**
this.routingService.navigateByUrl('/' + data.internalRoute);
thank you!
1 post - 1 participant
Hey,
just tried to start a new project with
npm install -g @ionic/cli
and
ionic start
and I’m getting this error messages which apparently has to do with some dependency of jest and vue2. It’s a brand new Project so im wondering if im missing anything here.
1 post - 1 participant
Hi everyone, I’m working on a simple project to practice registration, login and updating user data from a database. My idea is to use SQLite as practice and then move on to firebase.
You can also recommend me other technologies apart from SQLite
Is there any tutorial/documentation that supports ionic 6?
1 post - 1 participant
Have anyone integrated any payment gateways available in South Africa ?
1 post - 1 participant
I’m currently trying to test a component that requires the user to click on an IonRadio input.
<IonRadioGroup
value={selected}
onIonChange={(e) => setSelected(e.detail.value)}
>
<IonItem>
<IonLabel>Boosted and Auto-Assign first</IonLabel>
<IonRadio title="normal" slot="start" value="" />
</IonItem>
<IonItem>
<IonLabel>Closest to you</IonLabel>
<IonRadio title="distance" slot="start" value="Distance" />
</IonItem>
</IonRadioGroup>
I followed this official article to set my tests up.
This is my setupTests.ts
import { mockIonicReact } from '@ionic/react-test-utils';
mockIonicReact();
However, no matter what I try my test is failing:
import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import { ionFireEvent } from '@ionic/react-test-utils';
import Component from './index';
const setup = async () => {
const utils = render(
<Component />
);
const normal = await utils.findByTitle('normal');
const distance = await utils.findByTitle('distance');
return {
...utils,
normal,
distance,
};
};
describe('Shift list sorting', () => {
it('can select other options', async () => {
const { distance} = await setup();
ionFireEvent.click(distance);
expect(distance).toHaveAttribute('aria-checked', 'true');
});
});
Results in
How can I test my component? Is the info in the article not relevant anymore?
1 post - 1 participant
I build an ionic app based on capacitor that use firebase. Until now I had one environment but after launch of the app, I want to have a dev environment and a prod environent, in order to not change the data in production.
So I created a new firebase project. In this project I created a web app and android app.
I copy the firebaseConfig from the web app and put it in the environment.ts while the prod firebaseConfig is in environment.prod.ts.
I run several test to understand how do I use each environment and my conclusion is that google-service.json has no impact on ionic app. I test it on the chrome simulator and on real devices.
I summerized my tests on the following table (result column is the actual environment that used):
As you can see, the google-services.json has no impact at all. The only thing that matter is the --prod since it determince which environment.ts file is used.
Am I right?
1 post - 1 participant
While debugging an app on my Pixel XL running Android 10, I noticed that the dark mode is not behaving the same as it does on an iOS device.
I’m using Ionic V6 and when I turn the dark theme on in the device Accessibility settings, the app still displays in the light mode.
When I attempt to debug through the Chrome browser, I can switch the preferes-color-scheme emulation to dark and the app will display in dark mode, will not render that way when opening.
Is there something else that is needed with Android to have the app display in dark mode if the dark theme is selected on the device?
1 post - 1 participant
Hi, I am using the ion-checkbox for the first time and I’m a little confused about the usage. What I am trying to achieve is to add the value I set through v-model to an array if the checkbox is checked so I can retrieve the values from the array. For the checkbox I have:
<ion-checkbox class="categoryCheckbox" value="Music" v-model="categories"></ion-checkbox>
And then I display the checked checkboxes as such:
<span>Checked categories: {{ categories }}</span>
Where categories is the array I want to populate with the values of the checked boxes.
However this results in the value of categories to be true or false, depending on whether or not the checkbox is checked, and doesn’t contain the value of “Music” as intended. I would think this is the checked property and not the value property. I don’t understand the usage of
@update:modelValue="entry.isChecked = $event :modelValue="entry.isChecked">"
that I see in the documentation.
I followed the Vue documentation for this type of input binding as I am confused about how it works using ion-checkbox. Any help is appreciated!
1 post - 1 participant
The Modal Controller is being created but is shown when the route changes.I don’t understand what’s going on but today when trying to open ModalController the modal is created but not displayed on the screen. It started showing when I changed the route.
async openModal() {
const modal_ = await this.modalCtrl.create({
component: ApplicationDetailPage,
cssClass: '',
backdropDismiss: false,
componentProps: {
config: this.config
}
});
return await modal_.present();
}
package.json
"@angular-devkit/schematics": "^13.1.4",
"@angular/common": "~12.0.1",
"@angular/core": "~12.0.1",
"@angular/forms": "~12.0.1",
"@angular/platform-browser": "~12.0.1",
"@angular/platform-browser-dynamic": "~12.0.1",
"@angular/router": "~12.0.1",
"@awesome-cordova-plugins/barcode-scanner": "^5.38.0",
"@awesome-cordova-plugins/core": "^5.37.1",
"@awesome-cordova-plugins/firebase-x": "^5.37.3",
"@capacitor-community/barcode-scanner": "^2.0.1",
"@capacitor/android": "^3.4.0",
"@capacitor/app": "1.1.0",
"@capacitor/browser": "^1.0.7",
"@capacitor/core": "3.4.0",
"@capacitor/haptics": "1.1.4",
"@capacitor/ios": "3.4.0",
"@capacitor/keyboard": "^1.2.1",
"@capacitor/status-bar": "1.0.7",
"@ethersproject/contracts": "^5.5.0",
"@ethersproject/providers": "^5.5.2",
"@ionic-native/app-availability": "^5.36.0",
"@ionic-native/barcode-scanner": "^5.36.0",
"@ionic-native/camera": "^4.20.0",
"@ionic-native/core": "^5.36.0",
"@ionic-native/fcm": "^5.36.0",
"@ionic-native/in-app-browser": "^5.36.0",
"@ionic/angular": "^6.0.3",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"apexcharts": "^3.33.0",
"assert": "^2.0.0",
"buffer": "^6.0.3",
"cordova-browser": "6.0.0",
"cordova-plugin-firebasex": "^13.0.1",
"cordova-plugin-inappbrowser": "^5.0.0",
"ios-deploy": "^1.11.4",
"moment": "^2.29.1",
"native": "0.3.3",
"ng-apexcharts": "^1.6.0",
"ngx-swiper-wrapper": "^10.0.0",
"paraswap-core": "^1.0.2",
"process": "^0.11.10",
"rxjs": "~6.6.0",
"stream-browserify": "^3.0.0",
"swiper": "^7.4.1",
"tslib": "^2.0.0",
"webpack": "^4.46.0",
"zone.js": "~0.11.4"
I think it’s related to dependencies, as I’ve been running into such a problem out of the blue. If different dependencies are needed to solve the problem, I can share them as well.
1 post - 1 participant
Hey everyone,
I have a few ion cards that slide inside the swiper component or what was formerly known as ionic slides. My ion card displays information. Some of that information on the card, I’d like to be able to scroll it left/right using touch. The problem is swiping goes to the next ion-card in the slider component.
How can I tell the computer that when scrolling (touch left/right) on that specific info it should disable swiping to the next ion card?
Thanks!
1 post - 1 participant
I’m pretty new to ionic, I’m starting to style out my app, and I would like my sign up form to be vertically centered on the page.
I have the following layout
<template>
<ion-page>
<ion-content>
<ion-grid>
<ion-row v-if="errorMessage">
<ion-col>{{ errorMessage }}</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-page>
</template>```
To try and have the full grid vertically centered I added this to my Vue file
I can see this css in the inspector, however it seems like it's not being applied, the content just stays at the top. am I missing something?1 post - 1 participant
I am working on an ionic application which is in final stage. Since it includes payment gateway transactions, i would like to give additional security to the app by prompting a popup when the app is started every time. Popup will request system authentication - either pin or bio-metric (like phonepe app in India) whichever the user is using to login to the mobile. Any idea how to implement this?
1 post - 1 participant
My team is struggling with the implementation of Speech Recognition in Ionic 5 for android.
We have tried the browser’s Speech Recognition API and also tried with the Native solution in the ionic website iteself.
https://ionicframework.com/docs/native/speech-recognition
The problem we are facing is that it works on my device running on Android 10 but not on any device with Android 11 or above. On Android 11 device, with native solution, is says speech recognition is not available on device. We also tried installing/updating Google Speech Services and enabling/disabling the voice services to no avail.
If anyone could guide us, that would be great.
1 post - 1 participant
Hi people, when i do command ionic cordova prepare android i receive this error:
cordova\version"' is not recognized as an internal or external command, operable program or batch file.
at ChildProcess.exithandler (node:child_process:397:12)
at ChildProcess.emit (node:events:390:28)
at maybeClose (node:internal/child_process:1064:16)
at Socket.<anonymous> (node:internal/child_process:450:11)
at Socket.emit (node:events:390:28)
at Pipe.<anonymous> (node:net:687:12) {
killed: false,
code: 1,
signal: null,
cmd: '"C:\\Programacao\\appMalote216\\platforms\\android\\cordova\\version"'
}
[ERROR] An error occurred while running subprocess cordova.
I had this issue when trying to meet Google Play’s new API level targeting policy. When I create the android@9 platform I can run the command normally and even generate a signed apk, when I add the android@10 platform when I give the prepare command I get this error.
Configuration of development environment:
Ionic:
Ionic CLI : 6.18.1 (C:\Users\micro-85\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 5.9.3
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 10.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 1.5.0
System:
Android SDK Tools : 26.1.1 (C:\Users\micro-85\AppData\Local\Android\Sdk)
NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
npm : 8.4.0
OS : Windows 10
Node:v16.13.2
NPM: 8.4.0
Gradle: 7.3.3
1 post - 1 participant
Currently Appflow build produce both .apk and .aab files. Is there any way to disable generate .apk file ? Because .aab is enough for us and don’t need to deal with issues while generating apk file. I don’t have much experience with android app so is this make sense?
1 post - 1 participant
Originally published at: An Angular Dev Tries Svelte - Ionic Blog
If you ask anyone who knows me, they would say my favorite framework for building apps is Angular. While I do like React and Vue as well, Angular to me has always felt like home. I feel the most productive when working in Angular and the most confident in the code I write. But it’s…
1 post - 1 participant
I’m trying to configure my Ionic React app to serve the PWA from a subdirectory without affecting the iOS/Android apps.
To serve the PWA from a subdirectory, in package.json, I can change homepage: "/"," to homepage: “subdirectory”,`; then, if I build the PWA, the URLs will be correct.
However, with homepage: "subdirectory",, if I build an Android or Ionic app, I get stuck on the splash screen because it can’t find any of the files.
How can I tell Ionic React that I want to use a different homepage value only for the PWA?
1 post - 1 participant