Hi, just delete
"defaultCollection": "@ionic/angular-toolkit" in "cli" from angular.json and you will be able to generate with options which angular provides
↧
No inline-template and inline-stylesheets in ng generate component schema
↧
Google Play In-app Billing API version is less than 3
Hi,
I got this error from many of my users and I couldn’t solve it even though I tried a lot of things for a long time. Could you help ?
ERROR:
{“code”:6777001,“message”:“Init failed - Setup failed. BILLING_UNAVAILABLE: Google Play In-app Billing API version is less than 3”}
Device Infos:
{“cordova”:“9.1.0”,“device”:{“available”:true,“platform”:“Android”,“version”:“9”,“uuid”:"-----",“cordova”:“9.1.0”,“model”:“SM-A305F”,“manufacturer”:“samsung”,“isVirtual”:false,“serial”:“unknown”}
↧
↧
Speech recognition plugin without displaying google
please is there a waty to use the speech recognition plugin without google displaying on my phone screen or is there a way to use speech recognition in an ionic app without using google ? Please help me.
↧
How to authenticate using Firebase Authentication in the Ionic-4?
thanks for the awesome information.
↧
Create category and subcategory with VueJS Ionic Slides
I’m trying to recreate something similar to this with ionic slides. Basically, I want to have a subcategory that only appears when category is chosen. Obviously, subcategory should show the appropriate data that was assigned to its name. However, when I click “A” category, I’m able to see its subcategories. But “B” isn’t working, it shows the subcategories of “A”.
I’m using Ionic 5 Vue JS.
This is my category slide
<ion-slides
style="padding: 0px; margin: 0px; padding-bottom: 10%"
pager="true"
:options="slideOpts"
id="categories"
name="categories"
:value="subcatName"
v-model="subcatName"
@click="subcatSetup"
>
<ion-slide
style="padding: 0px; margin: 0px"
v-for="category in categories"
:value="category.name"
:key="category.name"
v-model="subcatName"
v-on:change="subcatSetup"
>
<div class="item">
<ion-card class="card-size">
<ion-card-content class="card-content">
<img
:src="'/assets/images/' + category.icon"
style="height: 70%; width: 70%; padding: 5%; margin: auto"
/></ion-card-content>
</ion-card>
<span class="caption"> {{ category.name }}</span>
</div>
</ion-slide>
</ion-slides>
</div>
And this is the subcategory
<div v-if="subcatName" style="padding: 0px; margin: 0px">
<ion-label style="padding: 5%;">Sub Category</ion-label>
<ion-slides
style="padding: 0px; margin: 0px; padding-bottom: 10%"
pager="true"
:options="slideOpts"
id="subcats"
name="subcats"
v-model="subcat"
>
<ion-slide
style="padding: 0px; margin: 0px"
v-for="subcat in subcats"
:value="subcat"
:key="subcat"
>
<div class="item">
<ion-card class="card-size">
<ion-card-content class="card-content">
<img
:src="'/assets/images/'"
style="height: 70%; width: 70%; padding: 5%; margin: auto"
/></ion-card-content>
</ion-card>
<span class="caption">{{ subcat }}</span>
</div>
</ion-slide>
</ion-slides>
</div>
subcatSetup() {
for (var i = 0; i < this.categories.length; i++) {
this.subcatName = this.categories[i].name;
if (this.subcatName === "A") {
return (this.subcats = this.A);
} else if (this.subcatName === "B") {
return (this.subcats = this.B);
}
}
},
I’m pretty sure I’m doing something wrong in subcatSetup
↧
↧
Create category and subcategory with VueJS Ionic Slides
Cant help you with your error but you may want build this using hammer.js
Ion slides uses this under the hood and ion slides will be removed in newest version in favor of hammer
Hammer has solid docs too
↧
Create category and subcategory with VueJS Ionic Slides
Thanks for the reply
You mean I should build sliders in vue js and add gestures with hammer js? Because as far as I know hammer js is for touch gestures right?
Also, because Ionic was using swiper js for slides, I’m thinking to create the slides with it. Would that be good to create slides with swiper js?
Thanks in advance
↧
Speech recognition plugin without displaying google
↧
Create category and subcategory with VueJS Ionic Slides
Sorry, u r right. Swiper.js
↧
↧
How to regsiter plugin manually in capacitor 3?
I am trying to use plugin for background location tracking on android capacitor suppose to register plugin automatically in MainActivity.java but thats not happening. I tried to use that manually but that is also not happening
package com.siloc.users;
import com.getcapacitor.BridgeActivity;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import java.util.ArrayList;
import com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps;
import com.equimaps.capacitor_background_geolocation.BackgroundGeolocation;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(CapacitorGoogleMaps.class);
registerPlugin(BackgroundGeolocation.class);
}
}
How i could do that ?
↧
Is there any way to open external app from inappbroswer?
Hi
with Ionic 5 with Capacitor (Android, IOS, PWA) open a website with inappbroswer, and the website contains whatsapp and payment checkout links.
is there any way to open external whatsapp and payment app from inappbroswer when user click the links in inappbroswer?
really need to find a solution for this.
thanks
↧
Is there any way to open external app from inappbroswer?
I am using the http://wa.me way to open a message in whatsapp
Check out google for the url scheme
Or any of this working?
↧
Timer across multiple pages
I am new to Ionic so I may not be using all the terms correctly. I’m making a quiz app that uses a countdown timer to alert the user that they should stop working. I was able to find a timer on the forums, but I am having some issues maintaining it across multiple pages. The questions are rendered on a page and the timer is a component in the title bar of the page template. There is a button at the bottom of the page that renders the next question. Because of how it is set up, the timer restarts every time a new question is rendered. I was wondering how I could set up the timer such that it would work across all the question pages.
I tried adding the timer function to a service, but it did not render the timer.
Here are the important code snippets:
timer.component.html
<div class="timer" *ngIf="countdownDisplay">
<div>
<p>{{countdownDisplay}}</p>
</div>
</div>
timer.component.ts
import { Component, OnInit } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';
import { addSeconds, format } from 'date-fns';
import { FullPaperServiceService } from '../full-paper-service.service';
@Component({
selector: 'app-timer',
templateUrl: './timer.component.html',
styleUrls: ['./timer.component.scss'],
})
export class TimerComponent implements OnInit {
secs = 10;
countdownDisplay?: string;
starter$ = new Subject<void>();
timerStarted: boolean = false;
constructor(
private FPService: FullPaperServiceService,
) { }
ngOnInit() {
if(this.FPService.timerStarted === true) {
this.startCountdown();
}
}
startCountdown(): void {
this.starter$.next();
let nsecs = this.secs;
interval(1000)
.pipe(
takeUntil(this.starter$),
takeWhile(countup => countup <= nsecs),
map(countup => {
let countdown = nsecs - countup;
let d = new Date();
d.setHours(0,0,0,0);
d = addSeconds(d, countdown);
let fmt = format(d, "HH:mm:ss");
return fmt;
})
)
.subscribe(cd => this.countdownDisplay = cd,
(err) => console.log(err),
() => this.FPService.endTest());
}
}
full-paper-service.service.ts
import { Injectable } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';
import { addSeconds, format } from 'date-fns';
@Injectable({
providedIn: 'root'
})
export class FullPaperServiceService {
testStarted: boolean = false;
timerStarted: boolean = false;
starter$ = new Subject<void>();
secs = 10;
countdownDisplay: string;
constructor() { }
startTest() {
this.testStarted = true;
}
startTimer() {
this.timerStarted = true;
}
endTest() {
this.testStarted = false;
}
startCountdown(): void {
this.starter$.next();
let nsecs = this.secs;
interval(1000)
.pipe(
takeUntil(this.starter$),
takeWhile(countup => countup <= nsecs),
map(countup => {
let countdown = nsecs - countup;
let d = new Date();
d.setHours(0,0,0,0);
d = addSeconds(d, countdown);
let fmt = format(d, "HH:mm:ss");
return fmt;
})
)
.subscribe(cd => this.countdownDisplay = cd,
(err) => console.log(err),
() => this.endTest());
}
}
Function to start the test
startTest() {
...
if(this.FPService.testStarted === true) {
this.router.navigate(['./',this.questionnums[0]], {relativeTo: this.activatedRoute});
this.FPService.startTimer();
}
});
});
}
There are quite a lot of pages, and since I can’t show them all, if there are any that will make answering the question easier, please let me know.
↧
↧
"ionic capacitor run android --livereload" fails because Android Gradle using Java 1.8
After getting my project to work with iOS I am really struggling to get the Android emulator to work.
The issue seems to be around an old version of Java (1.8) being used. I have tried various solutions including ensuring that the project is using Java 11 in Android Studio, but every time I try
ionic capacitor run android --livereload
I get the same build problems.
When checking the Gradle version with
./gradlew --version
I get:
Gradle 6.8
Build time: 2021-01-08 16:38:46 UTC
Revision: b7e82460c5373e194fb478a998c4fcfe7da53a7eKotlin: 1.4.20
Groovy: 2.5.12
Ant: Apache Ant™ version 1.10.9 compiled on September 27 2020
JVM: 1.8.0_301 (Oracle Corporation 25.301-b09)
OS: Mac OS X 10.16 x86_64
How do I get Gradle to use Java 11?
↧
Multi projects (ionic app and web app)
Hello,
I’m working on developing an application available on both mobile and web. I use on the one hand Ionic 5 Angular and Angular with Material Angular.
The code is very similar and I would like to find a way to reuse as much as possible.
My idea is to create a shared library for logical things : services, interfaces, etc… it’s the easy part.
But how to manage the other components, for example my app-card is ion-card with Ionic and mat-card with Material Angular.
Do you have any advices ? What do you think if I start building my entire library with Ionic components (and therefore using them for the web instead of Material Angular) ?
What about web performance, risks apart from not benefiting components of Material Angular ?
Or should I just put in my library the minimum and develop both versions of my visuals components, strictly the same, each time.
Thanks for your help !
↧
Multi projects (ionic app and web app)
My advice would be to start out using either Ionic or Angular Material exclusively, and then test what you and your users think of the interface. I would not bother trying to maintain two separate UI codebases until you have absolutely rock-solid feedback that either the Ionic experience on desktop or the Angular Material experience on mobile is considered unacceptable.
↧
Timer across multiple pages
This is absolutely the way to go, so can you instead share what things looked like when the timer was in the service? You can’t render directly from the service, but the actual countdown itself needs to be elevated out of an individual component.
↧
↧
Jerky CSS animation on Android
Having the same issue with Swiper.js now.
Surely there is a way around this or do Ionic developers just put up with jerky animation on Android devices?
↧
Is there any way to open external app from inappbroswer?
It doesn’t work inside inappbroswer.
Can inappbroswer event listener detect the whatsapp link, then open it with system browser, which will open the whatsapp app?
↧
Run my ionic app in M1 Mac but ADB is still Intel
Hi Ionic Team,
Got my new M1 Mac, I installed all the dependencies of Ionic Projects with Arm based,
but when I run my app and check activity monitor all the process name are already APPLE,
but there is one process that is still intel and it’s ADB.
I already installed also the platform-tools as ARM BASED that contains the ADB.
Is there a way to make the ADB process name to APPLE?
Note: provided screenshots for my concern
Thanks Ionic Team!
↧