At the moment, no. The current picker implementation is not set up for this. But it’s been discussed before and there’s an open issue regarding it.
↧
Wheel selector inside content
↧
Hide scroll bar
↧
↧
"Type 'HealthOriginal' is not a constructor function type." when extending native-plugin Health
I’m following these instructions on how to mock native-plugins. Trying this leads to the error in the title.
I am using Ionic 5. Has the way to mock native plugins changed dramatically?
↧
Question regarding the Ionic Natvie Printer
Hi all,
I’m utilising the ionic native printer.
I’ve got a modal with some styled content (external SCSS file) and 2 images in here.
When i use the printer plugin like:
LocalPrinter.print(document.getElementById("print-modal").innerHTML, LocalPrintOptions);
I obviously lose the styling and also the images don’t come through to the Print Preview popup on the native dialog.
My question is - How can i include the CSS and images so they also appear?
Thanks,
Alan
↧
Modal: ERROR Error: Uncaught (in promise): overlay does not exist
Hi All,
I have tried to find a solution to a common problem which i have realised a few people have had regarding the dismiss of the modal.
As for my modal structure, i have a page which calls a modal and a button within that which calls another modal
Page 1 --> Modal A --> Modal B
The issue is that Modal B closes without a problem If i use a function on the ion-item which then returns the correct parameter. However, with router link embedded in my HTML the modal does not redirect - maybe router link only works with pages?
When the category is selected and returns to Modal A and an attempt is made to close it, this returns ‘ERROR Error: Uncaught (in promise): overlay does not exist’ if the close button is clicked.
selling-tab.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SellingTabPage } from './selling-tab.page';
import { AddProductComponent } from './add-product/add-product.component';
import { CategoryComponent } from './category/category.component';
const routes: Routes = [
{
path: '',
component: SellingTabPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
],
declarations: [SellingTabPage,
AddProductComponent,
CategoryComponent,
],
entryComponents: [AddProductComponent, CategoryComponent,]
})
export class SellingTabPageModule {}
category.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { ModalController } from '@ionic/angular';
import { NgModule } from '@angular/core';
@Component({
selector: 'app-category',
templateUrl: './category.component.html',
styleUrls: ['./category.component.scss'],
})
export class CategoryComponent implements OnInit {
categoryOptions = [
'Item 1',
'Item 2',
'Item 3',];
constructor(
private route: Router,
private modalCtrl: ModalController
) { }
ngOnInit() {
}
async close() {
await this.modalCtrl.dismiss();
}
async getCategory(event){
let selected: any;
try {
selected = event.detail.value;
console.log(selected + ' has been selected');
} catch (error) {
console.log(error.message);
}
}
}
category.component.html
<ion-header>
<ion-toolbar>
<ion-title>Select Category</ion-title>
<ion-buttons slot="end">
<ion-button (click)="close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-radio-group (ionChange)="getCategory($event)">
<ion-item *ngFor="let category of categoryOptions" [routerLink]="['/add-product']" [queryParams]="{ type: category }" routerDirection="back">
<ion-label>{{category}}</ion-label>
<ion-radio value={{category}} slot="end"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</ion-content>
More code can be showed if needed or if any files are missing
Thanks in Advance
↧
↧
Ionic 4 angular 8 strange issue with reactive forms
I don’t know why but I changed code from
this.afauth.auth.onAuthStateChanged(async user =>{
if(user) {
this.router.navigate(['details'])
}
})
to
this.afauth.authState.subscribe(user =>{
if(user) {
this.router.navigate(['details'])
}
})
and it is start working
↧
Runtime.js ERR_ABORTED 404
Having the same! Some got a solution for that?
↧
Wheel selector inside content
Ok I think that issue is here: https://github.com/ionic-team/ionic-docs/issues/711
↧
Wheel selector inside content
Mmm, no that’s not the issue.
↧
↧
"Type 'HealthOriginal' is not a constructor function type." when extending native-plugin Health
Mmm, probably, I haven’t used native-mocks to be honest, what have you tried so far?
Can you share some code please.
↧
Array of Array
Hello, I´m beginner at Ionic and I´m doing an app.
I need 4 arrays in array and I have this code:
tudo = {
divisao: [],
figura: [],
tempo: [],
quantidade: []
}
And this give me a error, what I should do?
↧
Question regarding the Ionic Natvie Printer
I’d suggest looking at the original plugin doc to get a better sense of how to do this.
↧
Gesture Ionic 4
Blazing fast click event can be achieved with
<ion-button (touchstart)="startTime()">
↧
↧
"Type 'HealthOriginal' is not a constructor function type." when extending native-plugin Health
Honestly? Not much.
I’m using the mock to test with Jasmine, instancing the mock class directly instead of providing, during the tests.
Instead of extending from Health, I CAN extend HealthOriginal. That works and gives me the desired workflow, but it fails when I start the tests, and I’m guessing this relates to how it is imported.
I’ve also looked at the mock-classes you’ve provided, but I fail to see how the results would be much different.
As an emergency, I can just leave the mock as empty, but having a connection between the mock class and real class is a pretty big advantage.
This does not work:
import { HealthData, HealthQueryOptions, HealthDataType, Health } from '@ionic-native/health';
import { LocalHealthData } from '../../../health-data/services/health-data-services';
import { Injectable } from '@angular/core';
@Injectable()
export class HealthMock extends Health {
data: HealthData[];
authorized = false;
available = true;
readAuthorizations: string[];
constructor(data: LocalHealthData[]) {
super();
this.setData(data);
this.readAuthorizations = [];
}
Leading to the following error: Type 'HealthOriginal' is not a constructor function type.
This does work when developing:
import { HealthData, HealthQueryOptions, HealthDataType, Health, HealthOriginal } from '@ionic-native/health';
import { LocalHealthData } from '../../../health-data/services/health-data-services';
import { Injectable } from '@angular/core';
@Injectable()
export class HealthMock extends HealthOriginal {
data: HealthData[];
authorized = false;
available = true;
readAuthorizations: string[];
But leads to the following problem when trying to test:
ERROR in ./src/app/native/health-data-provider/__tests__/HealthMock.ts 4:42-56
"export 'HealthOriginal' was not found in '@ionic-native/health'
↧
Question regarding the Ionic Natvie Printer
Yeah I have - I’ve noticed it works fine with normal img tags but not IonImg tags. I’ll get another look now.
↧
QR Scan not working
Hello, everyone. I am new to ionic native and building the qr-scan page now. Actually I followed https://ionicframework.com/docs/native/qr-scanner
here is my code snippets,
- qr-scanner.page.ts
import { Component, OnInit } from ‘@angular/core’;
import { NavController } from ‘@ionic/angular’;
import { Router } from ‘@angular/router’;
import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner/ngx’;
// import services
import { AuthService } from ‘…/services/auth.service’;
import { StorageService } from ‘…/services/storage.service’;
@Component({
selector: ‘app-qr-scanner’,
templateUrl: ‘./qr-scanner.page.html’,
styleUrls: [’./qr-scanner.page.scss’],
})
export class QrScannerPage implements OnInit {
scanSubscription: any;
constructor(
public navCtrl: NavController,
private router: Router,
public qrScanner: QRScanner,
public authService: AuthService,
public storageService: StorageService
) { }
ngOnInit() {
}
scan() {
(window.document.querySelector('ion-app') as HTMLElement).classList.add('cameraView');
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
this.qrScanner.show();
let self = this;
this.scanSubscription = this.qrScanner.scan().subscribe((text:string) => {
let splittedAry = text.split('qr_code?');
let saAray = splittedAry[1].split('&');
let saaText = saAray[0];
saaText.replace('payload=', '');
let saatAry = saaText.split(';');
self.authService.signin('register', saatAry[0], saatAry[1]);
});
} else if (status.denied) {
console.log("Camera permission permanently denied");
this.authService.dynamicSuccess("Denied", "Camera permission permanently denied");
} else {
console.log("Camera permision temporarily denied");
this.authService.dynamicSuccess("Denied", "Camera permision temporarily denied");
}
})
.catch((e: any) => {
console.error('Error', e);
this.authService.dynamicSuccess("Error", "Sth went wrong");
});
}
stopScanning() {
(this.scanSubscription) ? this.scanSubscription.unsubscribe() : null;
this.scanSubscription=null;
(window.document.querySelector('ion-app') as HTMLElement).classList.remove('cameraView');
this.qrScanner.hide();
this.qrScanner.destroy();
}
goLogin() {
this.storageService.clearStorage();
this.router.navigateByUrl(this.storageService.step);
}
ionViewWillEnter() {
this.scan();
}
ionViewWillLeave() {
this.stopScanning();
}
}
-
qr-scanner.page.html
<ion-button color=“dark” class=“qrscs-close” (click)=“goLogin()”>Close
-
app.component.scss
ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {background: transparent none !important;
}
- app.module.ts
import { QRScanner } from ‘@ionic-native/qr-scanner/ngx’;
…
providers: [
StatusBar,
SplashScreen,
FCM,
QRScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
…
It`s so urgent and anybody can help me ?
↧
Ionic 4: HttpClient is giving me a “http error response 0 unknown error”
I changed to HTTPS but still is giving me the same error
↧
↧
Ionic 4: HttpClient is giving me a “http error response 0 unknown error”
Maybe you dont have correct CORS Headers here like described here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Which is your backend api framework ?
↧
Haw do i change the font size of all pages using ion-range in ionic 4
I found the solution, I post here if it can help someone
home.component.html
<ion-grid>
<ion-row>
<ion-col size-sm="6" offset-sm="3">
<ion-item>
<ion-icon slot="start" name="resize"></ion-icon>
<ion-range min="1" max="6" snaps="true" [(ngModel)]="fontSize" (ionChange)="sizeMe(fontSize)">
</ion-range>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
<h3 [style.font-size.em]="fontSize"> Test1</h3>
<p [style.font-size.em]="fontSize">Test</p>
home.component.ts
fontSize: number;
sizeMe(size) {
this.storage.set("size",size);
this.fontSizeService.setFontValue(TaillePolice);
}
Provider fonSizeService.ts
import { Observable, Subject } from 'rxjs';
private glabalData = new Subject<any>();
getFontValue(): Observable<any> {
return this.glabalData.asObservable();
}
setFontValue(FontValue) {
return this.glabalData.next(FontValue);
}
Other page e.g detail.component.ts
fontSize;
this.storage.get("Taillepolice").then((fontSize)=>{
this.fontSize = fontSize;
});
this.themeService.getFontValue().subscribe((TaillePolice)=>{
this.fontSize = TaillePolice;
console.log("Home page font size",TaillePolice);
});
detail.component.html
<ion-content padding >
<h2 [style.font-size.em]="fontSize">Bonjour</h2>
<p [style.font-size.em]="fontSize" > Hello </p>
</ion-content>
don’t forget to import storage and your provider
↧
Ionic 4: HttpClient is giving me a “http error response 0 unknown error”
i am working with AWS, the endpoint is created in amazon.
This how created the header:
this.httpOptions = {
headers: new HttpHeaders(
{
'Authorization': this.tobas64string
})
}
↧