I have a app in Ionic 4 and using Esp32, so I connected in Router with app and get Id of devices
Now, I would like send ip through HttpClient and I know how to send this method
the URL should be “http://10.0.0.0/26/on” and my service I have
return this.http.get(${url} + ${eventClick});
But dont work, any solution ?
1 post - 1 participant
What I am trying to do is show a list of select options beside the button when I click it?
Similar like this:
I have used ion-select, but it always shows the list in the central of screen and with select mark.
Thanks for help!
1 post - 1 participant
Hi, I have been trying to figure out how exactly to get the menu component working because currently the menu bar icon is showing up but whenever I try to click on it the menu does not appear. Also, there are no errors thrown so I’m not entirely sure where I messed up in the process of creating the menu component?
app.component.html:
<ion-app>
<!--<ion-split-pane contentId="main">-->
<ion-menu side="start" type="overlay" menuId="left" contentId="main" [swipeGesture]="false">
<!-- <ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
-->
<ion-header>
</ion-header>
<ion-content>
<div class="ion-text-center center-content relative" (click) = "profile()" >
<ion-img id = "userPicture" alt = "" src = "assets/imgs/user-default.png"></ion-img>
<div class = "profile-edit">
<div class="ion-text-center">
<ion-img alt = "" src = "assets/imgs/camera_green.png"></ion-img>
</div>
</div>
</div>
<div class = "menu-list" *ngFor="let p of pages">
<ion-menu-toggle auto-hide="true" *ngIf="p.url">
<ion-item [routerLink]="p.url" routerDirection="forward" routerLinkActive="active">
<ion-icon [src] = "p.icon" slot="start"></ion-icon>
<ion-label>{{p.title}}</ion-label>
</ion-item>
</ion-menu-toggle>
</div>
<div class="ion-text-right logout" (click) = "logout()">
Logout
</div>
</ion-content>
</ion-menu>
<!--</ion-split-pane>-->
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<!--<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>-->
<ion-router-outlet id=”main”></ion-router-outlet>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
app.component.ts:
export class MyAppPage {
@ViewChild(NavController) nav: NavController;
rootPage: any;
backButtonPressedOnceToExit: any;
menu: any;
document: any;
pages: Array<{ title: string, url: any, icon: string }>;
hideWaves: boolean;
bgInterval: any;
config: {
scrollAssist: false,
autoFocusAssist: false
};
private userToken: string;
constructor(public storage: Storage,
public platform: Platform,
public splashScreen: SplashScreen,
private toastCtrl: ToastController,
private route: Router,
// tslint:disable-next-line:no-shadowed-variable
private ApiService: ApiService,
public menuCtrl: MenuController,
private keyboard: Keyboard,
private backgroundMode: BackgroundMode,
private fcm: FirebaseX,
private badge: Badge
) {
this.initializeApp();
this.hideWaves = false;
// used for an example of ngFor and navigation
this.pages = [
{title: 'Today\'s Meds', url: '/dashboard', icon: 'assets/imgs/menu-today-med.png'},
{title: 'Medicines', url: '/medicines', icon: 'assets/imgs/menu-medicine.png'},
{title: 'Healthcare Providers', url: '/care-team', icon: 'assets/imgs/menu-care-team.png'},
{title: 'Invite Friends', url: '/friends', icon: 'assets/imgs/menu-friends.png'},
{title: 'Communities', url: '/communities', icon: 'assets/imgs/menu-communities.png'},
{title: 'Connect to healthcare systems', url: '/hcs', icon: 'assets/imgs/menu-hcs.png'},
{title: 'Devices / Wearables', url: '/wearables', icon: 'assets/imgs/menu-wearables.png'},
{title: 'Notifications', url: '/notifications', icon: 'assets/imgs/menu-notification.png'},
{title: 'Settings', url: '/settings', icon: 'assets/imgs/menu-setting.png'},
{title: 'Help & Support', url: '/faq', icon: 'assets/imgs/menu-help.png'}
];
//this.ApiService.getToken().then((val) => {
// if (val){
//this.route.navigate(['/auth']);
//}
// })
}
example menu header in page:
<ion-header color = "primary">
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button autoHide="false"></ion-menu-button>
</ion-buttons>
<ion-title>CLINAKOS</ion-title>
</ion-toolbar>
</ion-header>
1 post - 1 participant
When an underlying array is updated of an ion-select, the ion-select UI doesn’t change the item showing in the ion-select. Clicking on the ion-select brings the correct list with the removed item.
When using the same code with select/option instead of ion-select/ion-select-option the behavior is correct.
To reproduce the issue, use a blank template with angular, and place the following:
home.page.ts:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage {
items = [‘a1’, ‘a2’, ‘a3’];
itemId;
constructor() {}
delItem(){
this.items.splice(this.itemId, 1);
}
}
home.page.html:
<ion-header [translucent]=“true”>
<ion-toolbar>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]=“true”>
<ion-select [(ngModel)]=“itemId” placeholder=“Select item” interface=“alert”>
<ion-select-option *ngFor=“let item of items; let i=index” [value]=“i”>{{i}} : {{item}}</ion-select-option>
</ion-select>
<select [(ngModel)]=“itemId” placeholder=“Select item” interface=“alert”>
<option *ngFor=“let item of items; let i=index” [value]=“i”>{{i}} : {{item}}</option>
</select>
<ion-button [disabled]=“itemId == null” (click)=“delItem()”>Delete {{itemId}}</ion-button>
</ion-content>
1 post - 1 participant
I am creating an app in ionic 4 and want to use firebase push notifications I am following this tutorial https://enappd.com/blog/implement-ionic-4-firebase-push/34/ and still on my emulator i dont get any push notifications can you please let me know if there is something missing or if you have a better tutorial that is working please let me know
1 post - 1 participant
Hi!
Im starting to use ionic with peripherals (earphones,onboard computers, etc)
Is possible to connect a peripheral via bluetooth and keep the app waiting in background to catch an event? For example, when a button is pushed , a wheel is rotated or u change the volume in the pheripheral.
If the app is in foreground, the pheripheral works, but in background it doesnt.
I saw that “background-mode” , let the app works in background, but I dont know if I possible to catch events from pheripherals.
Is this possible? And is “background-mode” the correct library?
Thanks!!
1 post - 1 participant
I have been trying to retrieve data from database using ionic. The problem is the data is not displayed on my ionic page no matter what I try. I even tried from tutorials like: https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step and https://www.javatpoint.com/ionic-firebase (which turns up similar to what I have been doing) just incase I was wrong or out of touch but still the same issue. After searching online for help without success, I reverted back to the original, and the problem is it just display a blank page and it doesn;t give any errors, kindly assist. Here is my code :
For service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export interface Location {
id: string;
title: string;
area: number;
location: string;
description: Text;
image: string;
}
@Injectable({
providedIn: 'root'
})
export class FirebaseService {
private snapshotChangesSubscription: any;
public currentUser: any;
private user:any;
locations: Observable<Location[]>;
locationsCollection: AngularFirestoreCollection<Location>;
constructor(
public afs: AngularFirestore,
public afAuth: AngularFireAuth
){
this.afAuth.onAuthStateChanged(res => {
if(res){
this.user = res;
console.log('User '+res.uid+' is logged in');
this.locationsCollection = this.afs.collection<Location>
// ('people').doc(res.uid).collection('locations');
(
`people/${res.uid}/locations`,
ref => ref.orderBy('timestamp')
);
this.locations = this.locationsCollection.snapshotChanges().pipe(
map(actions =>{
return actions.map(a => {
// console.log('User '+res.uid+' is still logged in');
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return { id, ...data };
});
})
);
}
});
}
getLocations():Observable<Locations[]>{
return this.locations;
}
For component:
import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { FirebaseService, Location } from '../service/firebase.service';
import {AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-locations',
templateUrl: './locations.page.html',
styleUrls: ['./locations.page.scss'],
})
export class LocationsPage implements OnInit {
locations: Observable<Location[]>;
locationsCollection: AngularFirestoreCollection<Location>;
constructor(
public loadingCtrl: LoadingController,
private firebaseService: FirebaseService
) {}
ngOnInit() {
this.locations = this.firebaseService.getLocations();
}
For template:
<ion-header>
<ion-toolbar>
<ion-title>Locations</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let location of ( locations | async)">
<ion-label>{{location.title}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
I’m using ionic version 5.4.9
1 post - 1 participant
Hey there,
Im using the menu display type „push“ in my project. It pushes everything correctly to the side, except for the bottom navbar (ion-tabs). They are overlayed by the menu… Any suggestions?
Cheers
Dominik
1 post - 1 participant
Hi
When I run command “ionic serve” or “ionic -v” or “ionic cordova build android” I will give this ERROR
Please help me…
1 post - 1 participant
Hi,
I am looking for help with my project. I am building a sports tracking app and have issues with
graphql client-server communication and background geolocation in Angular. I am willing to pay for your time.
I need help with:
1 post - 1 participant
I got this error every time I try to build, I’m using the latest Xcode Beta version:
The following build commands failed:
CompileC /… /x86_64/YoutubeVideoPlayer.o /… /Plugins/cordova-plugin-youtube-video-player/YoutubeVideoPlayer.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Any solution or clue about this?
1 post - 1 participant
What is the best, up to date method for uploading file(s) (image, video; 1 or even 1+ files per upload) to server via http.post()? Is http.post() even the best option?
I’m using Ionic 5, Cordova 9, and Angular. I can’t find a reliable up to date tutorial, the docs are absolutely horrid (maybe I’m wrong), and nothing I’ve tried has been able to work for me.
If you need information for what I’ve tried, environment info, more details, I have an additional forum post that was “too long” here: Forum Post
Thanks for any help.
1 post - 1 participant
I’m building a chat application. And I have a problem that’s got me a little bit upset.
I always have a leftover iOS autocorrector in the chat ion-textarea. Every time a word has a correction suggestion and I hit the button to send the message. The blue hover remains in the textarea.
How can I fix this?
Look at the images so you can see what’s going on
1 post - 1 participant
Good day! I am trying to use Ionic Native HTTP for requesting API data to Server. I also want to get Authorization Token that stored in Ionic Storage. Below are my code
import { HelperService } from './helper.service';
import { HTTP, HTTPResponse } from '@ionic-native/http/ngx';
import { Storage } from '@ionic/storage';
constructor(private helper: HelperService, private nativeHttp: HTTP, private storage: Storage) {}
deleteShipping(shipping): Promise<HTTPResponse>{
this.shipping.forEach(result => {
if(shipping.id === result.id){
this.shipping = [];
}
})
let headers: {};
this.storage.get(this.helper.TOKEN_KEY).then(token => {
headers = {
'Authorization': 'Bearer '+ token
};
})
return this.nativeHttp.delete(this.helper.API_URL+'/user/shipping/'+shipping.id, {}, headers);
}
When im trying to delete, it fails. because the headers is empty. the server blocked the request because there is no token from the request. Any help would be appreciated. Thank you.
1 post - 1 participant
Now booking Jim Corbett Packages has became very easy. Just visit us & see how
1 post - 1 participant
Is there a guide on how “In App Browser” is used in a React Ionic project?
The current doc (https://ionicframework.com/docs/native/in-app-browser/) on In App Browser seems to be targeted at Angular.
In particular, I’m trying the following code:
import { InAppBrowser } from '@ionic-native/in-app-browser';
// ...
const browser = InAppBrowser.create("some url");
browser.on('loadstart').subscribe(event => {
// ...
})
This code is able to open.a new browser, but I’m seeing an error “Cannot read property ‘subscribe’ of undefined”, which I don’t understand why. Can someone give an example of how I should use “In App Browser” in Ionic + React?
2 posts - 2 participants
Here is how I load my files without having those long paths => ‘…/…/…/…/folder’
Go to tsconfig.json and add your paths
"compilerOptions": {
"baseUrl": "./",
.........
"paths": {
"@app/*": ["src/app/*"],
"@environments/*": ["src/environments/*"],
}
},
For example in my _helpers folder I have
index.ts // This file is important
http.interceptor.ts
jwt.interceptor.ts
app.initializer.ts
.....
Index.ts has the following code;
export * from './app.initializer';
export * from './jwt.interceptor';
export * from './http.interceptor';
....
To load them now without the long path name is easy and quick.
So this…
import { JwtInterceptor } from './../../_helpers/jwt.interceptor';
import { HttpInterceptor } from './../../_helpers/http.interceptor';
......
Becomes …
import { JwtInterceptor, HttpInterceptor } from '@app/_helpers';
Happy coding 
1 post - 1 participant
The Accessibility.speak function is working fine on Android, but not on iOS. I’ve tested on a real device iPhone 7 and in the simulator with iPhone X and iPad Pro 4th Generation.
import { Plugins } from '@capacitor/core';
const { Accessibility } = Plugins;
Accessibility.speak({ value: 'App is loading' });
I’m getting this in the console, but no audio plays…
Accessibility.speak(#123832822)
Object
callbackId: "123832822"
methodName: "speak"
options: {value: "App is loading"}
pluginId: "Accessibility"
type: "message"
Running the latest Capacitor
@capacitor/cli 2.2.1
@capacitor/core 2.2.1
@capacitor/ios 2.2.1
@capacitor/android 2.2.1
Any help appreciated, thanks.
1 post - 1 participant
Hello,
Navigation from (onclick) event using this.router.navigateByUrl(‘login’); changes route, but component not being rendered. After second click on any part of screen, component is rendered.
thanks
1 post - 1 participant