It seems that ion-input does not trigger event handler bound to Angular’s (blur) event but does trigger if I use (ionBlur). But in turn I have a problem with testing ionBlur because I have no idea how to programatically (in test) emit event. (somewhere I have found that <debugElement>.componenetInstance.ionBlur.emit() worked in ionic-v3 but it’s not the case in ionic-v4/5 because ionBlur is an Observable.
Any idea?
1 post - 1 participant
I cannot find what the difference between those two elements is. I can see that ion-input has custom events (among others ionBlur) but not why I should use ionBlur instread of blur. One (quite important I think) is that plain blur does not trigger handler.
Could someone explain it to me or refer to some doc?
Thanks in advance
1 post - 1 participant
I’m using @ionic/storage without the cordova sqlite plugin, and I’m trying to figure out where the path of the indexeddb file is. Can anyone help please?
1 post - 1 participant
Hello,
According to the cordova-plugin-admob-free github page, you need to add the variable ADMOB_APP_ID when adding the plugin:
cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"
How do you add the app id when installing the admob plugin the Capacitor way:
npm install cordova-plugin-admob-free
Thanks,
1 post - 1 participant
I have an existing Cordova application currently in both the Google and Apple stores. The App is called “iXplore Yellowstone”. It uses a mysql database. I’d like to convert it to a PWA.
I’ve tried to follow the Capacitor docs. When I run “npx cap server”, the browser comes up with my main menu, but the database doesn’t load. I think I’m missing a service-worker. Does one get created automatically? I also don’t see a splash screen.
Can I use an embedded mysql database with a PWA? If so, are there any tutorials on how to do this.
BTW, I’m new to PWAs and Ionic.
Thanks.
1 post - 1 participant
Hi,
IONIC 5 Cordova android/ios - the button/item click(router.navigate) inside a toolbar is not triggering navAnimation. I tried the custom animation from this post. This animation is working when router.navigate called from content control clicks. https://github.com/mhartington/v5-animations/blob/4dbe2c81d8acdfe916f5ff13c14b90432edf85d1/src/app/app.module.ts.
I have 2 versions but both of them working. One is with ion-header/ion-toolbar/ion-item/button. The other with ion-header/<toolbar component with button/item>. I tried the back button inside a toolbar as well. For some reason navAnimation is not triggering when router.navigate initiated from a control inside toolbar. The issues is in both ios and android.
I need to implement a different animation when clicked on button/item click navigate to a page. Appreciate your help on this issue.
1 post - 1 participant
I have installed image picker and google maps plugin. but its crashed in latest android versions. but it working fine in other android version.
when i click upload image it going crashed an android 9
i am using ionic 4
1 post - 1 participant
I found an interesting error today while uploaded an iOS archive to App Store connect.
Got below notification message:
The build status of [App Name] (version 0.0.1 (0.0.1) iOS) has changed to Invalid Binary
How to reproduce
ionic start MyApp blank
No for capacitorionic cordova platform add ios@5.1.1MyApp.xworkspace in XcodeIonic info:
Ionic:
Ionic CLI : 6.9.2 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)
Utility:
cordova-res : 0.14.0
native-run (update available: 1.0.0) : 0.3.0
System:
ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v12.15.0 (/usr/local/bin/node)
npm : 6.14.5
OS : macOS Catalina
Xcode : Xcode 11.4.1 Build version 11E503a
1 post - 1 participant
I have trying to create ionic app with ‘ionic start’ command. I am getting following error.
npm WARN deprecated tslint@6.1.2: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
I have , Node - 12.16.0
Ionic - 6.9.0
Angular - 9.1.0
Can please anyone help me on this.
Thanks.
1 post - 1 participant
I need my app to show up in the “share with” dialog for Android and iOS. For example, if someone is on Pintrest and wants to share an image and taps the share icon, I need my app to show up in the dialog. And of course I need to receive the data.
In Android you do this with an intent. Then specify the mime types. But I’m new to Ionic.
I’ve seen the three year old post on this with a convoluted answer, but I’m hoping Ionic 5 has a cleaner way to do this.
Thanks.
1 post - 1 participant
</ion-title>
<ion-list lines="none">
<ion-item>
<ion-label><ion-button (click)="getGeolocation()" size="small">My Location</ion-button></ion-label>
<ion-label>Address: {{ geoPostalCode }} {{ geoCity }} </ion-label>
</ion-item>
</ion-list>
1 post - 1 participant
Page Transition Animation not working in ionic 5 doesn’t work.
If used ionic tab.
1 post - 1 participant
Hello, i need to redirect if the user onclick, the function verify if is good and redirect
const auth = async () => {
let token = false
await isToken()
.then(response => {
token = response
})
if (token) {
return (
<IonRouterOutlet>
<Route path="/events" component={Events} exact={true}/>
<Route path="/" render={() => <Redirect to="/events"/>} exact={true}/>
</IonRouterOutlet>
)
}
}
return (<IonButton onClick={(e) => auth()}>teste redirect</IonButton>)
but my code not redirect
1 post - 1 participant
I’m getting a strange behavior that occurs randomly, the tabs stop changing the view and not even call ngOnInit, if I refresh the page everything back to work normally. I would like some help on how to debug this or any clue where to look for this bug.
Most of the time this occurs after authentication, I’m using angular fire 6.0
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.0.1
@capacitor/core : 2.0.1
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v14.2.0 (/usr/bin/node)
npm : 6.14.5
OS : Linux 5.6
{
"name": "Project",
"version": "0.0.1",
"author": "Joao Pasqualini Costa",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/fire": "^6.0.0",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@capacitor/core": "2.0.1",
"@ionic-native/core": "^5.26.0",
"@ionic-native/splash-screen": "^5.26.0",
"@ionic-native/status-bar": "^5.26.0",
"@ionic/angular": "^5.1.1",
"@ionic/storage": "^2.2.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^4.0.0",
"core-js": "^2.5.4",
"firebase": "^7.14.5",
"ionic": "^5.4.16",
"opensheetmusicdisplay": "^0.7.6",
"rxjs": "~6.5.1",
"tslib": "^1.13.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.20",
"@angular/cli": "~8.3.23",
"@angular/compiler": "~8.2.14",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@capacitor/cli": "2.0.1",
"@ionic/angular-toolkit": "^2.1.1",
"@ionic/lab": "3.1.3",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.9",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "^7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project"
}
1 post - 1 participant
Hi there, in starting to use ionic react I’m trying to disable the side menu on register and login page but I have not got any luck. Can you guys point me in the right direction?
1 post - 1 participant
I have a problem when i implemented a plugin PushNotification in capacitor, the problem is that when te phone receive a push notification don´t make any sound. This is my code.
PushNotifications.addListener('pushNotificationReceived',
(notification: PushNotification) => {
console.log('Push received: ',JSON.stringify(notification));
}
this is the settings in capacitor.config.json
"PushNotifications": {
"presentationOptions": ["badge", "sound", "alert"]
}
1 post - 1 participant
I am developing an application with IONIC 4 for android and IOS.
I add a side menu (ion-menu), it works perfectly on android.
But in IOS it is giving me problems, the menu opens perfectly. But when I want to close the menu. Graphically the menu closes, but when I try to interact with the application, only the options within the side menu are activated.
Only the side menu items are useful, the rest of the application is canceled.
This is the process.
Main page normally:
I open the side menu:
I close the menu:
All this options gets blocked:
But this options still are activated, even though the menu has been hidden.
This only happen in IOS, my specifications:
My code:
<ion-menu side="start" content-id="main-content">
<ion-header class="headermenu">
<div class="spacioemenuleft">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
<img alt="logo" style="width:18.9vw; height:10.6vh; border-radius: 50%;" src="{{pictureusuariomenu}}" >
</div> </div> </div>
</div>
<div class="spacioemenuright">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div class="textsaldo2" [innerHTML]="fullname"></div>
<div class="bloque">
<div style="float:left; width:70%; height:100%" class="textsaldo2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
PIN: {{pinusuario}}
</div> </div> </div>
</div>
<div style="float:right; width:30%; height:100%; background-color:white;" (click)="copyText()">
<img alt="logo" style="width:100%; height:100%" src="assets/imgs/compartir-b.png" >
</div>
</div>
<span class="error ion-padding" style="color:white; font-weight:bold; margin-top:1em; padding-top:0em;" *ngIf="registrado">
PIN COPIADO!!!
</span>
</div>
</div>
</div>
</ion-header>
<ion-content >
<div class="ion-padding">
<div class="espacio2 margenboton" routerLink="/recargarsaldo">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;">
Recargar Saldo
</div> </div> </div>
</div>
<ion-list>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/profile">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/perfil.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/profile">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mi perfil
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/notificaciones">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11notificaciones.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/notificaciones">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Notificaciones
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%;padding:0.8em;" routerLink="/misretiros" >
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/6dolares.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/misretiros">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Mis retiros
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/historial">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/11historial.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/historial">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Historial
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;" routerLink="/contacto">
<img alt="logo" style="width:2.7vh; height:2.7vh;" src="assets/imgs/contact5.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2" routerLink="/contacto">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;">
Contáctanos
</div> </div> </div>
</div>
</ion-item>
<ion-item>
<div style="float:left; width:20%; height:100%; padding:0.8em;">
<img alt="logo" style="width:2.7vh; height:2.6vh;" src="assets/imgs/7cerrar.png" >
</div>
<div style="float:left; width:80%; height:100%;" class="textblue2">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:left;" (click)="cerrarsession();" >
Cerrar sesión
</div> </div> </div>
</div>
</ion-item>
</ion-list>
</div>
<div style="height: 15vh; background-color:#F3F3F3; padding:0.2em;">
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:center;" >
<div style="float:left; width:40%; height:100%;" >
<div style="display:table;width:100%;height:100%;">
<div style="display:table-cell;vertical-align:middle;">
<div style="text-align:right;">
<p class="textblue2" style="font-weight:bold;">En alianza con:</p>
</div> </div> </div>
</div>
<div style="float:left; width:60%; height:100%; padding:0.1em; padding-top: 0.6em;" >
<img alt="logo" style="width:80%; height:auto" src="assets/imgs/Grupo517.png" >
</div>
</div> </div> </div>
</div>
</ion-content>
</ion-menu>
Any ideas?
1 post - 1 participant
Hello World!
I’m making a android app using ionic and angular.
When i try to inject the geolocation object in the constructor the application crashes.
Without any error’s the page is simply not shown.
I use the following code
import { Geolocation } from '@ionic-native/geolocation';
constructor(public alertController: AlertController, private router: Router, private geolocation: Geolocation)
{
}
My env:
Ionic:
Ionic CLI : 6.9.2 (C:\Users\Jim\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.0
@capacitor/core : 2.1.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res : 0.14.0
native-run : 1.0.0
System:
Android SDK Tools : 26.1.1 (C:\Users\Jim\AppData\Local\Android\Sdk)
NodeJS : v12.16.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.4
OS : Windows 10
1 post - 1 participant
Hi everybody,
I want to hide the default context menu when users select text on ios. I tried - webkit-touch-callout and -youbkit-touch-callout without success. Is there maybe the possibility to develop a plug in and override some methods of the wkwebview class to customize this behavior?
1 post - 1 participant
Hi I’m working with ionic 4 and angular 8 and I tried to make an ecommerce application and when I tried to load the addresspage book of customer’s address I got two errors that i didn’t understand where did it come
so I put below the stack trace of the console , I’m running my app in chrome
if somone could help me it will be helpful for me in order to continue
this is code files concerned
addressViewPage.html
<ion-header class="header-bg">
<ion-toolbar mode="ios">
<ion-buttons>
<ion-back-button defaultHref="/address-book" color="light"></ion-back-button>
</ion-buttons>
<ion-title color="light">Address view</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" color="light">
<ion-grid>
<ion-row class="logo-row">
<ion-col class="ion-no-padding">
<ion-img src="../assets/images/delivery.PNG"></ion-img>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-md="6" offset-md="3">
<form [formGroup]="addressForm" (ngSubmit)="onEditAddress()">
<ion-card>
<ion-card-header>
<ion-item-divider>
Address Details
</ion-item-divider>
</ion-card-header>
<ion-card-content>
<ion-list>
<div class="aligns-div">
<div class="form-group">
<ion-label>First Name</ion-label>
<ion-input type="text" [(ngModel)]="address.firstName" formControlName="firstName" class="form-control" ></ion-input>
</div>
<div class="form-group">
<ion-label>Last Name</ion-label>
<ion-input type="text" [(ngModel)]="address.lastName" formControlName="lastName" class="form-control" ></ion-input>
</div>
</div>
<div class="form-group">
<ion-label>street Address</ion-label>
<ion-input type="text" class="form-control" [(ngModel)]="address.street" formControlName="street"></ion-input>
</div>
<div class="form-group">
<ion-label>City</ion-label>
<ion-input type="text" [(ngModel)]="address.city" formControlName="city" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Country</ion-label>
<ion-input type="text" [(ngModel)]="address.country" formControlName="country" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Code Postal</ion-label>
<ion-input type="text" [(ngModel)]="address.zipCode" formControlName="zipCode" class="form-control"></ion-input>
</div>
<div class="form-group">
<ion-label>Numéro de téléphone</ion-label>
<div class="form-inline">
<ion-select value="216" formControlName="codeArea">
<ion-select-option value="216">+216</ion-select-option>
<ion-select-option value="242">+242</ion-select-option>
<ion-select-option>+337</ion-select-option>
</ion-select>
<ion-input type="text" [(ngModel)]="address.cellNumber" formControlName="cellNumber" class="form-control"></ion-input>
</div>
</div>
</ion-list>
</ion-card-content>
</ion-card>
<div class="form-group ion-text-center">
<ion-button color="success" type="submit">Save</ion-button>
</div>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
addressViewPage.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Address} from '../../models/address.model';
import {UserService} from '../../services/auth/user.service';
import {User} from '../../models/user.model';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-address-view',
templateUrl: './address-view.page.html',
styleUrls: ['./address-view.page.scss'],
})
export class AddressViewPage implements OnInit {
addressId: number;
user: User;
addressForm: FormGroup;
address: Address;
constructor(private route: ActivatedRoute,
private userService: UserService,
private formBuilder: FormBuilder) {
this.addressId = this.route.snapshot.params.id;
this.user = this.userService.getAuthenticatedUser();
console.log(this.user);
this.userService.getSingleAddress(this.addressId).subscribe(
res => {
this.address = res;
this.address.firstName = this.user.firstName;
this.address.lastName = this.user.lastName;
this.address.cellNumber = this.user.cellNumber;
console.log(this.address, 'here address-view go edit');
}
);
console.log(this.address, 'here');
}
ngOnInit() {
this.initForm();
}
/*
*
getSelectAddress(id: number, user: User) {
this.userService.getSingleAddress(id).then(
res => {
res.subscribe(
adr => {
this.address = adr;
this.address.firstName = user.firstName;
this.address.lastName = user.lastName;
this.address.cellNumber = user.cellNumber;
console.log(this.address, 'in the function');
},
err => {
console.log('failed to load address' + err);
}
);
}
);
console.log(this.address);
}*/
initForm() {
this.addressForm = this.formBuilder.group({
firstName: ['', [Validators.required]],
lastName: ['', [Validators.required]],
street: ['', [Validators.required]],
city: ['', [Validators.required]],
country: ['', [Validators.required]],
zipCode: ['', [Validators.required]],
codeArea: ['', [Validators.required]],
cellNumber: ['', [Validators.required]]
});
}
onEditAddress() {}
}
1 post - 1 participant