Hello,
do you have any idea how to change name of the app in the video preview (when screen is locked)? Normally I changed MKC and when the app is installed name of the app is also proper (as tag referes).
But in my app i have video and audio player and when i lock the screen instead of name of my app i have “Ionic App”. I removed app from my devices, simulator, I also removed ionic cordova rm ios and added it again, but nothing helped. Any idea what can it be?
1 post - 1 participant
Hello guys, i’m trying to figure out how to create in the smartest way ionic card dynamically from javascript.
At the moment i’m doing with these bunch of rows:
let card = document.createElement("ion-card");
let cardContent = document.createElement("ion-card-content");
let cardTitle = document.createElement("ion-card-title");
let row = document.createElement('ion-row');
let ionButton = document.createElement('ion-button');
let icon = document.createElement('ion-icon');
icon.slot = 'icon-only';
icon.name = 'expand-outline';
ionButton.color = 'light';
ionButton.append(icon);
cardTitle.append(ionButton);
cardContent.append(row);
card.append(cardTitle);
card.append(cardContent);
I supposed there is a faster way like:
let card = new IonCard({
// options to complete the card like ion-card-header, ion-card-content and stuff like that
})
But i’m wrong.
Any tips?
Thx guys
1 post - 1 participant
I’ve an issue with a FormGroup. I have a list of descriptions of places that I use to fill in a form with corresponding ion-input fields. The user should be able to update the description & submit it.
But when I don’t update the value in the fields, the data sent to the ts file is empty even if it’s well displayed on the screen. Can you please advise how to fix it?
Here is my html file:
<ion-content padding class="form-content" [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Debug</ion-title>
</ion-toolbar>
</ion-header>
<form [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)">
<div *ngFor="let place of (places | async)">
<ion-item>
<ion-label color="primary"></ion-label>
<ion-input type="text" formControlName="desc_{{place.id}}" [value]="place.name"></ion-input>
</ion-item>
</div>
<ion-button expand="full" type="submit">Save</ion-button>
</form>
</ion-content>
Here is my ts:
import { Component} from '@angular/core';
import { Observable } from 'rxjs';
import { Validators, FormBuilder, FormGroup, FormControl, FormArray, ValidationErrors } from '@angular/forms';
import { PersonService } from '../../person.service';
import Place from '../../types';
@Component({
selector: 'app-debug',
templateUrl: './debug.page.html',
styleUrls: ['./debug.page.scss'],
})
export class DebugPage {//} implements OnInit {
places: Observable<Place[]>;
validations_form: FormGroup;
constructor(
public formBuilder: FormBuilder,
public personService: PersonService
) {
this.places = personService.getAllPlaces_full();
this.validations_form = this.formBuilder.group({
'desc_1': ['', Validators.required],
'desc_2': ['', Validators.required],
'desc_3': ['', Validators.required],
'desc_4': ['', Validators.required],
'desc_5': ['', Validators.required],
'desc_6': ['', Validators.required]});
}
onSubmit(values){
console.log(values);
for (let [key, value] of Object.entries(values)) {
if (!( value ===null))
{
console.log(`${key}: ${value}`);
}
}
}
}
Here is the screen:
Here is the log:
1 post - 1 participant
I was in home page, and then i went to another page to add a record. And then i am coming back to home page. In home page i need to show the record(s) added.
In add page, i tried with ion-back-button
<ion-back-button></ion-back-button>
I also tried to use a custom button
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="changeRoute()">Back</ion-button>
</ion-buttons>
<ion-title>Reminder</ion-title>
</ion-toolbar>
</ion-header>
And the route change function is as below
changeRoute() {
this.router.navigate(['/home']);
}
But still, in the home page, none of the below methods are triggering.
ionViewWillEnter() {
console.log('ionViewWillEnter')
}
ionViewDidLoad() {
console.log('ionViewDidLoad')
}
ionViewWillLeave() {
console.log('ionViewWillLeave')
}
ionViewDidLeave() {
console.log('ionViewDidLeave')
}
ionViewWillUnload() {
console.log('ionViewWillUnload')
}
ionViewDidEnter() {
console.log('ionViewDidEnter');
}
My ionic version info is as below
Any help would be appreciated.
1 post - 1 participant
ion-datetime failed to show input-text after changing. I need to flip or change orientation then it will works. Web and Android mode are working fine. Anyone suggestion?
<div id="date-section" [@visibilityChanged]="visibility3" style="opacity: 0">
<div style="margin:40px;">
<ion-item>
<ion-label position="floating">{{ 'CHECK_IN_DATE' | translate | uppercase }}</ion-label>
<ion-datetime (ionChange)="changeSDate($event, 1)" displayFormat="YYYY-MM-DD" min="{{this.startDateS}}" max="{{this.endDateS}}" value="{{this.startDateFinal}}" ></ion-datetime>
</ion-item>
</div>
</div>
1 post - 1 participant
cropservice=>>Unable to find explicit activity class
(com.soundcloud.android.crop.CropImageActivity)have you declared this activity in your AndroidManifest.xml?:
it is giving above error after selecting image. and i am not able to crop image.
I am using @ionic-native/crop.
can anyone have solution?
1 post - 1 participant
Hi guys,
I am making a custom modal with a border radius so i can have rounded corners. i manage to do what i want, but the modal content will automatically have a scroll.
I tried to figure it out on the css but no luck.
Any one has any ideas? Here is my code.
CSS
.message-modal {
--height: 250px;
--max-height: 250px;
--border-width: 1px;
--border-style: solid;
--border-color: var(--ps-page-background2);
align-items: flex-end;
--backdrop-opacity: 0.3;
--border-radius: 10px 10px 0px 0px;
}
TS
const modal = await this.modalCtrl.create({
component: MessagePage,
cssClass: 'message-modal'
});
And here is the result
1 post - 1 participant
Hello,
I have a ion-nav in a separate section of my app (independant of the Angular routing that I’m using for the main content of my app). And I would like to INSERT a stack of pages into this ion-nav at a specified index, the functions insertPages and setPages seems perfect but lacks documentation.
To push a view one by one it’s :
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
await this.nav.push(MyNewComponent, { input1: "value", input2: "value" });
}
And I would like to do something like :
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
// Index 1
await this.nav.insertPages(1, [
{ component: MyNewComponent, componentProps: { input1: "value", input2: "value" } },
{ component: MyNewComponent, componentProps: { input1: "value2", input2: "value2" } },
{ component: MyNewComponent, componentProps: { input1: "value2", input2: "value3" } }
]);
}
But this is currently not possible … It says incompatible with type NavComponent which is "Function | HTMLElement | ViewController". So I can do the following to have 0 errors but HOW to pass componentProps as well ??
@ViewChild("nav") nav: IonNav;
ngOnInit(): void {
// Index 1
await this.nav.insertPages(1, [ MyNewComponent, MyNewComponent, MyNewComponent ]);
}
I would appreciate any help …
doc : https://ionicframework.com/docs/api/nav
cross-reference: https://github.com/ionic-team/ionic-framework/issues/21724
1 post - 1 participant
Is there a way to remove a build from Master channel?
I don’t want to rollback to a previously version neither push another version, just for now.
First I need to understand a problem that is happening, then I’ll be able to submit another build.
1 post - 1 participant
I have been trying to update my Angular version from 5 to version 9,1 and I have been facing some issues with the headers of my API calls. even though I have set up a process for the headers with the proper authorization. but whenever I try to make the API call the headers do not seem to show up. I have tested through postman if the API is callable with the token and it working as intended. Any ideas are appreciated.
getProfileDetails(userid) {
return this.http.get(`${env.p3ApiUrl}/users/${userid}`, this.requestOptions()).pipe(
catchError(this.handleError)).toPromise();
}
private requestOptions() {
const header = new HttpHeaders().set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*')
.set('Authorization', 'Bearer ' + this.getTokenString());
const requestOptions = {headers: header};
return requestOptions;
}
async getToken(){
return await this.storage.get('userToken');
}
getTokenString(): any {
this.getToken().then((val) => {
console.log(val);
return val;
});
}
Error:
Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"OK","url":"https://apicarenew.clinakos.com/users/50992","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://apicarenew.clinakos.com/users/50992: 401 OK","error":{"message":"unauthorized"}}
2 posts - 2 participants
Hi All,
Am new into ionic development, my manager asked me to upgrade an existing App of ours from ionic 3 to 5. Its a quite big application, my doubt is can i upgrade directly from ionic 3 to 5 or should i go as like from 3 to 4 and then 4 to 5?
2 posts - 2 participants
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
