Hey guys, I just created a social network starter.
Everybody welcome and especially contributors! Let’s work together. 
1 post - 1 participant
I am wondering whether I can split the MVC model of an ionic view into multiple controllers for one view? My main view seems so feature laden that the view.ts becomes extremely long. Manageable, but annoying. I’m considering to create some parts a component, but wondering if I could instead delegate items into “child” controllers to keep the main view.ts readable.
Is this possible? I can not find any real examples.
Thanks
ps: I’m on Ionic5
2 posts - 2 participants
Hi i have to put one toggle item and N radio items in a menu, both items are displayed correctly but i can’t interact with these, when i select toggle or radio nothing happens, no viusal changes happens and the events are not raised.
Here is my code:
HTML
<ion-menu side="end" menuId="first" contentId="main" class="menu-side-item">
<ion-header>
<ion-toolbar color="tertiary">
<ion-title>Configuración</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<!-- I have tried with "enabled" and without "enabled" is the same-->
<ion-item>Notificaciones<ion-toggle enabled (ionChange)="notifyChange($event)"></ion-toggle>
</ion-item>
<ion-item>Credenciales</ion-item>
<ion-radio-group (ionChange)="changedCompany($event)">
<ion-item *ngFor="let data of dataUser.companies">
<img src="{{data.logo}}" alt="company logo" class="logo-item">{{data.name}}
<ion-radio value="{{data.name}}" >
</ion-radio>
</ion-item>
</ion-radio-group>
...
TS
notifyChange(event) {
this.notifyEnabled = event.detail.checked;
console.log(this.notifyEnabled);
}
changedCompany(event){
console.log(event.target.value);
}
And this is how the items are displayed
Can you help me please? what am i doing wrong?
Regards
1 post - 1 participant
hey,
I would like to create a comments form (in my Ionic React app) that when submitting sends to a specific mailbox. I dont’ want to use email composer as that seems to open the on phone email client to achieve this, I want to stay in the app. Can I use something like formspree to achieve this or is there a better way?
cheers
david
1 post - 1 participant
Hey everyone,
i dont think that there is a way to easily call a submit outside a form so i thought you might have some suggestions…
<form id='test-form' onSubmit={ (e) => handleSubmit(e) }>
<IonComponents>....</IonComponents>
</form>
<IonButton type='submit' form='test-form'> Submit</IonButton>
Doesn’t work/ wont’t comple since IonButton has no Attribue form, but
<form id='test-form' onSubmit={ (e) => handleSubmit(e) }>
<IonComponents>....</IonComponents>
</form>
<button type='submit' form='test-form'> Submit</button>
Example 2 also checks for form validation, which i wont get just calling the handleSubmit function.
The examples above are extremly simplified examples, but they work when i put the IonButton inside the form like this (form validation etc…:):
<form id='test-form' onSubmit={ (e) => handleSubmit(e) }>
<IonComponents>....</IonComponents>
<IonButton type='submit' form='test-form'> Submit</IonButton>
</form>
Any help is appreciated
1 post - 1 participant
import { Component,OnInit, Injectable } from ‘@angular/core’;
import { MenuController,NavController } from ‘@ionic/angular’;
import { Platform } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { AngularFireAuth } from ‘@angular/fire/auth’;
import { ScreenOrientation } from ‘@ionic-native/screen-orientation/ngx’;
@Injectable()
@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’]
})
export class AppComponent implements OnInit {
userEmail: string;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public menu: MenuController,
private afAuth: AngularFireAuth,
private navCtrl:NavController,
private screenOrientation:ScreenOrientation,
) {
this.initializeApp();
}
ngOnInit() {
this.afAuth.user.subscribe(res => {
console.log('res', res);
if (res !== null) {
this.userEmail = res.email;
}
}, err => {
console.log('err', err);
})
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}
logout() {
this.afAuth.signOut()
.then(res => {
console.log(res);
this.navCtrl.navigateBack('/thanks');
})
.catch(error => {
console.log(error);
})
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
enableAuthenticatedMenu() {
this.menu.enable(true, 'authenticated');
this.menu.enable(false, 'unauthenticated');
}
}
1 post - 1 participant
home.html
<ion-title *ngIf="!showSearchbar">
home.ts
import { Component, OnInit } from ‘@angular/core’;
import { DatabaseService, Song } from ‘…/services/database.service’;
import { Platform } from ‘@ionic/angular’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
song: Song = ;
songs: Observable<any>;
public items: any = ;
public filterItems = ‘’;
showSearchbar: boolean;
constructor( public http: HttpClient, private db: DatabaseService, private platform: Platform) {
this.platform.ready().then(() => {
}).catch(error => {
console.log(error);
});
}
ngOnInit() {
this.setFilteredItems();
this.db.getDatabaseState().subscribe(rdy => {
if (rdy) {
this.db.getSong().subscribe(content => {
this.song = content;
});
}
});
}
setFilteredItems() {
this.items = this.db.filterSearch(this.filterItems);
}
}
//This what i have been doing from order tutorials on my db.ts page
filterItems() {
return this.database.executeSql('SELECT * FROM song ', ).then(data => {
const items: Song = ;
if (data.rows.length > 0) {
for (let i = 0; i < data.rows.length; i++) {
items.push({
id: data.rows.item(i).id,
title: data.rows.item(i).title,
verse1: data.rows.item(i).verse1,
verse2: data.rows.item(i).verse2,
verse3: data.rows.item(i).verse3,
verse4: data.rows.item(i).verse4,
verse5: data.rows.item(i).verse5,
verse6: data.rows.item(i).verse6,
});
}
}
this.items.next(items);
});
}
filterSearch(filterItems) {
return this.items.filter(items => {
return items.id.toLowerCase().indexOf(filterItems.toLowerCase()) > -1
|| this.items.title.toLowerCase().indexOf(filterItems.toLowerCase()) > -1;
});
}
Please help me, i want to filter the list of songs on the home page.
1 post - 1 participant
Hi All
I am testing Ionic 5 to use to build a side project.
I have a section where I ask users 7 questions and two of those have input fields while the other 5 require a yes or no answer.
So the questions with toggle must default to false(No) on page load then as user changes the selection then those be sent when user submits the form after answering all 7 questions.
I want to save the first 5 questions as an object and the other two are fine.
So I want to have something like this. screening data will be the combined 5 questions into one object with question id, description and toggle value (yes/no)
{
"user_id":15,
"score":45,
"company_id" : 39,
"additional_info":"visit",
"screening_data": [
{"id": 1 , "description": "description goes here 1", "answer" : "yes"},
{"id": 2 , "description": "description goes here 2", "answer" : "no"},
{"id": 3 , "description": "description goes here 3", "answer" : "yes"},
{"id": 4 , "description": "description goes here 4", "answer" : "no"},
{"id": 5 , "description": "description goes here 5", "answer" : "yes"}
]
}
One Submission I will be sending to backend via api.
I would like your assistance with this.
Thanks
1 post - 1 participant
I use cordova background geolocaiton plugin in my ionic 3 application.
ionic cordova plugin add cordova-plugin-mauron85-background-geolocation@alpha
npm install --save @ionic-native/background-geolocation@4
I expect the plugin work in background, once the device is moved over 40 meters, the plugin will trigger this.backgroundGeolocation.on(BackgroundGeolocationEvents.location) once, My code is like:
startBackgroundGeolocation() {
const config: BackgroundGeolocationConfig = {
desiredAccuracy: 10,
stationaryRadius: 20,
distanceFilter: 40,
debug: true, // enable this hear sounds for background-geolocation life-cycle.
stopOnTerminate: false // enable this to clear background location settings when the app terminates
};
this.backgroundGeolocation.configure(config).then(() => {
this.backgroundGeolocation
.on(BackgroundGeolocationEvents.location)
.subscribe((location: BackgroundGeolocationResponse) => {
console.log("!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!");
console.log(location);
});
});
this.backgroundGeolocation.start()
}
But after backgroundGeolocation start, I find the behavior is not like my expectation.
this.backgroundGeolocation.on(BackgroundGeolocationEvents.location) is triggered about ever 30 seconds without any device movementthis.backgroundGeolocation.on(BackgroundGeolocationEvents.location) has been triggered many times, and the number of times increases one every ~30 secondsfor example, when it is first triggered, the log shows:
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
in about 30 seconds, it is second triggered, log shows:
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
in next about 30 seconds, it is third triggered, log shows:
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
and so on.
I want .on(position) only be triggered when movement over 40 meters, and when it is triggered, just triggered once.
!!!!!!!!!!!!!!!!!!!!!!!!!! background geolocation !!!!!!!!!!!!!!!!!!!
I think there must be something wrong with my configuration setting, but I could not find the problem in the setting.
Could you please help if you familiar with cordova-background-geolocation plugin?
Thanks
1 post - 1 participant
Hi, I’m new to the ionic environment and I’m looking around trying to learn and I just wanted to know if I already have a vuejs or reactjs app if I want to inject ionic into it do I imperatively need to use the ionic components or can I leave my components with my custom CSS. And is it hard to add ionic on a already built spa with Vue or react?
Thanks
1 post - 1 participant
Hello,
I am facing the issue while uploading the IOS app to the test flight, it got rejected please help me to solve the issue. I also use the grep command to fine UIWebView but don’t know what to do next.
“@ionic-native/in-app-browser”: “^5.27.0”,
“@ionic-native/social-sharing”: “^5.27.0”,
“cordova-admob-sdk”: “^0.24.1”,
“cordova-ios”: “^5.1.1”,
“cordova-plugin-admob-free”: “^0.27.0”,
“cordova-plugin-inappbrowser”: “^4.0.0”,
“cordova-plugin-wkwebview-engine”: “^1.2.1”
1 post - 1 participant
hello in ionic 5 I want when user dubble click on back button hardware exit from app
this code not work, I use cordova…
thanks…
1 post - 1 participant
FCM: has been created
FCMPlugin.js:26 FCM: Ready!
vendor-es2015.js:103665 Ionic Native: deviceready event fired after 1 ms
vendor-es2015.js:103970 Native: tried calling FCM.getToken, but the FCM plugin is not installed.
pluginWarn @ vendor-es2015.js:103970
vendor-es2015.js:103976 Install the FCM plugin: ‘ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated’
???
its not given me the token
any help?
1 post - 1 participant
Hello,
I’m just getting started developing with Ionic (also generally a noob developer), and I’m having a problem using the storage module.
I started writing an app using the Tabs template and tried to follow the instructions for configuring storage here: https://ionicframework.com/docs/angular/storage
This is what my app.module.ts looks like:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicStorageModule } from '@ionic/storage';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
I’m getting the following TS error:
Error:(15, 69) TS2322: Type ‘(storageConfig?: StorageConfig) => ModuleWithProviders’ is not assignable to type ‘any | Type | ModuleWithProviders<{}>’.
Property ‘ngModule’ is missing in type ‘(storageConfig?: StorageConfig) => ModuleWithProviders’ but required in type ‘ModuleWithProviders<{}>’.
(My IDE is PHPStorm, its Linter is also hinting at a problem with IonicStorageModule.forRoot)
Here’s my tab2.page.ts:
import { Component } from '@angular/core';
import {Storage} from "@ionic/storage";
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
constructor() {}
zeichenButtonVisible = true;
zeichenInputVisible = false;
rundenButtonVisible = true;
rundenInputVisible = false;
oderVisible = true;
showZeichenInput = () => {
this.zeichenInputVisible = true;
this.zeichenButtonVisible = false;
this.rundenInputVisible = false;
this.rundenButtonVisible = true;
this.oderVisible = false;
}
showRundenInput = () => {
this.rundenInputVisible = true;
this.rundenButtonVisible = false;
this.zeichenInputVisible = false;
this.zeichenButtonVisible = true;
this.oderVisible = false;
}
// constructor(private storage: Storage) {}
//
// setStorage(){
// this.storage.set('numPlayers', '0');
// }
//
// readStorage() {
// this.storage.get('numPlayers').then((val)) => {
//use value for number of player name fields shwon in next tab
// }
// }
}
and this is the page’s html:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Spiel-Einstellungen
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-input autofocus="true" clear-input="true" inputmode="numeric" type="number">
Zahl der Spieler:
</ion-input>
<ion-item>Geschichtenlänge:</ion-item>
<ion-item id="zeichen-button" *ngIf="zeichenButtonVisible" (click)="showZeichenInput()">
<ion-button>
Anzahl Zeichen
<ion-icon name="arrow-forward-circle-outline"></ion-icon>
</ion-button>
</ion-item>
<ion-input id="zeichen-input" *ngIf="zeichenInputVisible" clear-input="true" inputmode="numeric" value="2000" type="number">Anzahl Zeichen</ion-input>
<ion-item *ngIf="oderVisible">oder</ion-item>
<ion-item id="runden-button" *ngIf="rundenButtonVisible" (click)="showRundenInput()">
<ion-button>
Anzahl Runden
<ion-icon name="arrow-forward-circle-outline"></ion-icon>
</ion-button>
</ion-item>
<ion-input id="runden-input" *ngIf="rundenInputVisible" clear-input="true" inputmode="numeric" type="number">Anzahl Runden</ion-input>
<ion-button [routerLink]="['/tab3']">Speichern</ion-button>
</ion-content>
I’m guessing, I’ve just not completed the configuration yet, but I’m kinda lost right now.
I haven’t understood from the documentation: Is Storage configured for the whole app, or do I need to inject it into every page that stores data? Which files do the configurations go into?
Sorry for all the noob questions, thanks for any hints!
1 post - 1 participant
Hi!
I need to add and automatic video recording button to my app.
Example:
If I click on a button or call a function, it should record automatically for 10 seconds.
And now im trying to do this with : https://ionicframework.com/docs/native/media-capture
My problem is that this open the camera app, but not record automatically, u should clik on record button and finish button.
There is a way to record automatically?
Thanks!
1 post - 1 participant
Hi,
I’m using Ionic 5, Angular 9.1.6, Capacitor 2.2.0 and I’m using Firebase Database and Storage to save photos.
I can do a CRUD correctly in Database, but, I cannot fetch photos in Storage.
Access to fetch at ‘image_url’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
My photos in Firebase Storage are inside a folder called “icons”.
Firebase Storage has public rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
My firebase.json:
{
"hosting": [
{
"target": "app",
"public": "www",
"ignore": [
"**/.*"
],
"headers": [
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
How can I fix this? This is the first time I’m facing this specific issue.
1 post - 1 participant
Hello there,
Hope you are doing well.
With regards, we are developing a hybrid video news android app(from our app: we are going to distribute the hyperlocal video news feed to end-users in short 15-20 seconds video format only).
For the above, we are looking to integrate Video player which supports HLS streaming and the technologies we are using to develop the Hybrid Android App are:
Ionic, Angular JS, Node JS & MySQL
Does the player mentioned in this link: https://github.com/frontyard/cordova-plugin-exoplayer supports HLS streaming with hybrid android app(Ionic, Angular Js, Node JS & MySQL)?
Please guide me
Will wait to hear from you
Thanks & Regards
Kumar Vansh Moondra
2 posts - 2 participants
hi
I have a page where given a select to the user he can switch the leaflet map I show.
After a initial leaflet map load, my problem is when i want to refresh the map.
I always get “Map container is already initialized”:
My Code
ionViewDidEnter() {
this.loadmap();//خواندن نقشه
}
//نشان دادن نقشه
loadmap() {
this.map = leaflet.map("map").fitWorld();//ایجاد نقشه
// استفاده از نقشه ایرانی
leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//attributions: 'www.tphangout.com',
maxZoom: 18//سایز نمایش نقشه
}).addTo(this.map);
// تابع مشخص کردن لوکیشن خود
if (this.offOnLocationFlag) {
//this.myLoc();
} else {
}
if (this.myLocFlag) {
this.myLocFlag = false;
this.myLoc();
}
//کلیک برروی نقشه و گرفتن مشخصات
this.clickMap();
if (this.latF) {
this.latF = false;
let marker: any = leaflet.marker([this.lat, this.lng], { icon: this.selfIcon });
this.map.addLayer(marker);
this.temploc = marker;
this.map.flyTo([this.lat, this.lng], 16);//نمایش محل موقعیت
}
}
1 post - 1 participant
How can I remove paddings from start and end of ion-tab-bar?
HTML
<ion-tabs>
<ion-tab-bar class="myTabs" slot="bottom">
<ion-tab-button tab="groups">
<ion-icon name="chatbubbles-outline"></ion-icon>
<ion-label>Chat</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings-outline"></ion-icon>
<ion-label>Pengaturan</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
CSS
.myTabs {
--background: #f1c40f;
}
.tab-has-label {
--background: none;
--color-selected: #2c3e50;
--color: #718093;
}
.tab-selected {
--background: #e1b12c;
}
Any idea?
1 post - 1 participant
Hello everyone,
i cannot build an android apk for 2 days. I did not change anything of my sourcecode.
When i try to build or try to create resources i get this error:
HTTP Error 503: POST https://res.ionic.io/api/v1/upload
Trying update the ionic cli leads to several other problems.
Will the server get online again?
7 posts - 2 participants