I look for any accordion or collapsable list using ionic and react but I can’t find any documentation in ionic component, does anyone got sample using this ionic-react?
Thanks
1 post - 1 participant
↧
Ionic 5 collapsable list/accordion (ReactJs)
↧
Canvas page with header/footer displayed wrong when opening first time
Hi,
I got a strange bug since migrating from Ionic 4 to Ionic 5.
I have a modal with a canvas to draw on pictures. The canvas is fullscreen and there are translucent toolbars in the header and footer. The footer toolbar contains an ion-radio-group and an ion-range.
After each restart of the app, the first time (and only the first time) I enter the page with the canvas, the picture gets displayed wrong. It’s not fullscreen and behind the header and footer is a white background. Then the image is scrollable, what means that the header and footer aren’t overlaping the ion-content. After closing the canvas and reopening it, everything works fine, no matter if it’s a new picture or the same. It only doesn’t work the very first time after closing and opening the app again.
I noticed that this bug only occurs if the ion-range or ion-radio-group are in the header or footer toolbar. If I remove them, everything is fine.
With Ionic 4, everything worked as expected, but with Ionic 5 it does not. Is this a bug or am I missing a change from Ionic 4 to Ionic 5?
The template:
<ion-header [className]="drawing === false ? 'toolsVisible' : 'toolsHidden'">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="saveAndQuit()">
<ion-icon slot="icon-only" name="checkmark"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="clearCanvas()">
<ion-icon slot="icon-only" name="refresh"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content fullscreen forceOverscroll="false">
<div id="canvas-container">
<canvas #imgCanvas (touchstart)="startDrawing($event)" (touchmove)="moveDrawing($event)" (touchend)="endDrawing()">
</canvas>
</div>
</ion-content>
<ion-footer [className]="drawing === false ? 'toolsVisible' : 'toolsHidden'">
<ion-toolbar>
<ion-row>
<ion-col *ngFor="let color of colors" class="color-block" [style.background]="color" tappable (click)="selectColor(color)"></ion-col>
</ion-row>
<ion-radio-group [(ngModel)]="selectedColor">
<ion-row>
<ion-col *ngFor="let color of colors" class="ion-text-center">
<ion-radio [value]="color"></ion-radio>
</ion-col>
</ion-row>
</ion-radio-group>
<ion-range min="2" max="20" [(ngModel)]="brushSize">
<ion-icon id="thinBrushIcon" slot="start" name="ellipse"></ion-icon>
<ion-icon slot="end" name="ellipse"></ion-icon>
</ion-range>
</ion-toolbar>
</ion-footer>
Left screenshot: First time entering the page --> broken
Right screenshot: Second time entering the page --> working
I tried a few fixes, but nothing worked. I would be very happy, If someone has a clue what the problem is…
1 post - 1 participant
↧
↧
Not able to save blob to file using @ionic-native/file writeFile() method
i’m using ionic file to save blob which i’m getting in response from an api, response is in form of string which is a blob.
Trying to convert blob(which is in string format) to ArrayBuffer then saving ArrayBuffer to file.writeFile() method.
public saveAsPdfFile(buffer: any, fileName: string): void {
this.getStoragePath().then(url=>{
let successMsg:any;
let data = this.str2ab(buffer);
//this.translate.get('downloadedSuccessfully').subscribe((res: string) => { successMsg = res; });
// atob(this.string_Base64PDF)
this.file.createFile(url, fileName+".pdf", true)
.then(() => {
console.log("file created");
this.file.writeFile(url, fileName+".pdf", data,{ replace: true }).then(() => {
this.showAlert(successMsg);
}).catch((err) => {
console.log(err)
});
})
});
}
str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
file is getting created but when i open error says “filename.pdf is of invalid format” tried same with excel also thows same error. let me know what i’m missing
1 post - 1 participant
↧
AngularFireFunctions break when creating a build with the flag --prod
I’m trying to call a firebase function using Angular Fire on an Ionic project.
const callable = this.afFunctions.httpsCallable('getWeather');
const result = await callable(request).toPromise();
This works fine in a development environment but upon deploying with, ionic build --prod --source-map, this same function no longer works.
Here are the errors when this function is called in production.
POST https://firebaseinstallations.googleapis.com/v1/projects/ProjectName/installations 400
FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: Request contains an invalid argument."
What invalid argument is being referred to here?
For context the dependences on this project are,
"dependencies": {
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/fire": "^6.0.0",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/forms": "~9.1.6",
"@angular/platform-browser": "^9.1.11",
"@angular/platform-browser-dynamic": "^9.1.11",
"@angular/pwa": "^0.901.8",
"@angular/router": "~9.1.6",
"@angular/service-worker": "^9.1.11",
"@capacitor/android": "^2.2.0",
"@capacitor/core": "2.2.0",
"@capacitor/ios": "^2.2.0",
"@codetrix-studio/capacitor-google-auth": "^2.1.1",
"@firebase/app": "^0.6.5",
"@ionic-native/core": "^5.0.7",
"@ionic-native/header-color": "^5.26.0",
"@ionic-native/sign-in-with-apple": "^5.26.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ionic/pro": "^2.0.4",
"@ionic/pwa-elements": "^1.5.2",
"@rdlabo/capacitor-facebook-login": "^2.0.3",
"@zxing/library": "^0.17.0",
"@zxing/ngx-scanner": "^3.0.0",
"capacitor-fcm": "^2.0.0",
"chart.js": "^2.9.3",
"cordova-android": "^8.1.0",
"cordova-ios": "^6.0.0",
"cordova-plugin-headercolor": "^1.0.0",
"cordova-plugin-ionic": "^5.4.7",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-sign-in-with-apple": "^0.1.1",
"cordova-plugin-splashscreen": "^5.0.4",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^2.6.9",
"date-fns": "^1.30.1",
"firebase": "^7.15.1",
"firebase-admin": "^8.12.1",
"libphonenumber-js": "^1.7.52",
"ng-circle-progress": "^1.5.1",
"ng2-charts": "^2.3.2",
"ng2-dragula": "^2.1.1",
"ng2-odometer": "^1.1.3",
"rxjs": "^6.5.5",
"stripe": "^7.9.1",
"trackjs": "^3.3.0",
"tslib": "^1.9.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/architect": "^0.901.8",
"@angular-devkit/build-angular": "^0.901.8",
"@angular-devkit/core": "^9.1.8",
"@angular-devkit/schematics": "^9.1.8",
"@angular/cli": "~9.1.5",
"@angular/compiler": "~9.1.6",
"@angular/compiler-cli": "~9.1.6",
"@angular/language-service": "~9.1.6",
"@capacitor/cli": "2.2.0",
"@compodoc/compodoc": "^1.1.11",
"@ionic/angular-toolkit": "^2.1.1",
"@ionic/cli": "^6.10.1",
"@ionic/ng-toolkit": "^1.1.0",
"@ionic/schematics-angular": "^1.0.7",
"@types/jasmine": "^3.5.10",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.11.1",
"@types/stripe": "^7.13.23",
"codelyzer": "^5.1.2",
"cordova-plugin-ionic-webview": "^5.0.0",
"firebase-tools": "^8.4.2",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3",
"webpack-bundle-analyzer": "^3.8.0"
}
This app.module seems to follow the Angular Fire docs fine.
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(),
RouterModule.forRoot(routes),
SharedProvidersModule,
SharedComponentsModule,
ModalModule,
AngularFireModule.initializeApp(environment.firebase, 'PROJECT_NAME'),
AngularFireFunctionsModule,
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireMessagingModule,
AngularFireStorageModule,
AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
],
providers: [
HeaderColor,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
1 post - 1 participant
↧
Problem With FileTransfer / File Chooser
I´m having a problem when upload file from device to server.
When I select file from Onedrive it works fine.
When I try to upload from device gallery the file apparently has not been sent to server.
content://com.android.providers.media.documents/document/image%3A5578
code: 3
“Permission Denial: reading com.android.providers.media.MediaDocumentsProvider uri content://com.android.providers.media.documents/document/image%3A5578/20200620_144008_1592823742003.jpg from pid=32115, uid=10388 requires that you obtain access using ACTION_OPEN_DOCUMENT or related APIs”
Code:
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { FilePath } from “@ionic-native/file-path/ngx”;
import { FileTransfer, FileTransferObject, FileUploadOptions } from ‘@ionic-native/file-transfer/ngx’;
constructor(
private androidFileChooser: FileChooser,
…}
fileUri = await this.androidFileChooser.open();
const fileTransfer: FileTransferObject = this.transfer.create();
fileTransfer.upload(fileUrl, uploadUrl, options)
package.json
“@ionic-native/file”: “^5.12.0”,
“@ionic-native/file-chooser”: “^5.26.0”,
“@ionic-native/file-opener”: “^5.13.0”,
“@ionic-native/file-path”: “^5.13.0”,
“@ionic-native/file-picker”: “^5.13.0”,
Any Idea?
I´d appreciate any kind of help.
Please let me know if you need more info.
Tks
1 post - 1 participant
↧
↧
AngularFireFunctions break when creating a build with the flag --prod
I’m trying to call a firebase function using Angular Fire on an Ionic project.
const callable = this.afFunctions.httpsCallable('getWeather');
const result = await callable(request).toPromise();
This works fine in a development environment but upon deploying with, ionic build --prod --source-map, this same function no longer works.
Here are the errors when this function is called in production.
POST https://firebaseinstallations.googleapis.com/v1/projects/ProjectName/installations 400
FirebaseError: Installations: Create Installation request failed with error "400 INVALID_ARGUMENT: Request contains an invalid argument."
What invalid argument is being referred to here?
For context the dependences on this project are,
"dependencies": {
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/fire": "^6.0.0",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/forms": "~9.1.6",
"@angular/platform-browser": "^9.1.11",
"@angular/platform-browser-dynamic": "^9.1.11",
"@angular/pwa": "^0.901.8",
"@angular/router": "~9.1.6",
"@angular/service-worker": "^9.1.11",
"@capacitor/android": "^2.2.0",
"@capacitor/core": "2.2.0",
"@capacitor/ios": "^2.2.0",
"@codetrix-studio/capacitor-google-auth": "^2.1.1",
"@firebase/app": "^0.6.5",
"@ionic-native/core": "^5.0.7",
"@ionic-native/header-color": "^5.26.0",
"@ionic-native/sign-in-with-apple": "^5.26.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"@ionic/pro": "^2.0.4",
"@ionic/pwa-elements": "^1.5.2",
"@rdlabo/capacitor-facebook-login": "^2.0.3",
"@zxing/library": "^0.17.0",
"@zxing/ngx-scanner": "^3.0.0",
"capacitor-fcm": "^2.0.0",
"chart.js": "^2.9.3",
"cordova-android": "^8.1.0",
"cordova-ios": "^6.0.0",
"cordova-plugin-headercolor": "^1.0.0",
"cordova-plugin-ionic": "^5.4.7",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-sign-in-with-apple": "^0.1.1",
"cordova-plugin-splashscreen": "^5.0.4",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^2.6.9",
"date-fns": "^1.30.1",
"firebase": "^7.15.1",
"firebase-admin": "^8.12.1",
"libphonenumber-js": "^1.7.52",
"ng-circle-progress": "^1.5.1",
"ng2-charts": "^2.3.2",
"ng2-dragula": "^2.1.1",
"ng2-odometer": "^1.1.3",
"rxjs": "^6.5.5",
"stripe": "^7.9.1",
"trackjs": "^3.3.0",
"tslib": "^1.9.0",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/architect": "^0.901.8",
"@angular-devkit/build-angular": "^0.901.8",
"@angular-devkit/core": "^9.1.8",
"@angular-devkit/schematics": "^9.1.8",
"@angular/cli": "~9.1.5",
"@angular/compiler": "~9.1.6",
"@angular/compiler-cli": "~9.1.6",
"@angular/language-service": "~9.1.6",
"@capacitor/cli": "2.2.0",
"@compodoc/compodoc": "^1.1.11",
"@ionic/angular-toolkit": "^2.1.1",
"@ionic/cli": "^6.10.1",
"@ionic/ng-toolkit": "^1.1.0",
"@ionic/schematics-angular": "^1.0.7",
"@types/jasmine": "^3.5.10",
"@types/jasminewd2": "^2.0.8",
"@types/node": "^12.11.1",
"@types/stripe": "^7.13.23",
"codelyzer": "^5.1.2",
"cordova-plugin-ionic-webview": "^5.0.0",
"firebase-tools": "^8.4.2",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3",
"webpack-bundle-analyzer": "^3.8.0"
}
This app.module seems to follow the Angular Fire docs fine.
imports: [
BrowserModule,
FormsModule,
IonicModule.forRoot(),
RouterModule.forRoot(routes),
SharedProvidersModule,
SharedComponentsModule,
ModalModule,
AngularFireModule.initializeApp(environment.firebase, 'PROJECT_NAME'),
AngularFireFunctionsModule,
AngularFirestoreModule,
AngularFireAuthModule,
AngularFireMessagingModule,
AngularFireStorageModule,
AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
],
providers: [
HeaderColor,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
1 post - 1 participant
↧
Ionic virtual scroll (change items)
Hello! Please tell me how you can update items so that the list of items is not lost. The algorithm steps are as follows: 1) from the list of tasks https://prnt.sc/t4ald1 we go to the card 2) make some changes or try to take a photo from the camera https://prnt.sc/t4amr0. 3) then return to the list https://prnt.sc/t4andu we get the following https://prnt.sc/t4aobp.
blocks.page.html - https://pastebin.com/X5xaXark
blocks.page.ts - https://pastebin.com/1ZKXimVC
1 post - 1 participant
↧
Ionic Native Badge with capacitor
Hi,
I’m trying to make use of the Ionic Native Badge plugin with cordova by using capacitor.
However in the documentation it shows me to install @ionic-native/badge@4 and cordova-plugin-badge.
Both which I’ve installed. Whenever I try to use the badge functionality I’m getting the error:
Object(WEBPACK_IMPORTED_MODULE_1__ionic_native_core[“cordova”]) is not a function.
I’m not sure whether this is because I haven’t done a haspermission check yet, or whether this is due to a conflict with ionic-native.
I found a github issue from someone saying I should update the ionic-native version since it is conflicting with other ionic-native functionality?
So I figured I’d do:
npm install @ionic-native/badge@latest
and
npm install cordova-plugin-badge@latest
which then tells me the following error during compilation:
error TS2749: ‘Badge’ refers to a value, but is being used as a type here.
for private badge: Badge,
where Badge is imported from @ionic-native/badge
any idea what I am doing wrong here?
Please help I’m stuck.
My information:
Ionic:
Ionic CLI : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.24
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 1.5.2
@capacitor/core : 2.1.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res (update available: 0.15.0) : 0.14.0
native-run (update available: 1.0.0) : 0.2.8
System:
Android SDK Tools : 25.2.4 (/users/doelapp/Library/Android/sdk/)
ios-deploy : 1.9.4
NodeJS : v12.1.0 (/usr/local/Cellar/node/12.1.0/bin/node)
npm : 6.13.7
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c
1 post - 1 participant
↧
CSS question about ion-grid - responsive margins
I’m new to ionic and to css - so forgive my ignorance.
I’ve made a game where I deal 92 cards face down for the user to pick, one by one.
I put the cards in a 12 column grid with 8 rows. For most screen sizes all the cards fit on one screen, but as the screen gets larger, the grid is too large for a screen, and the user must scroll down to get to the bottom.
I played with CSS and found that if I added left and right margins, I could shrink the size of the grid until it fit on one screen - but now when I shrink the screen size, it’s much too small for smaller screens.
I’ve tried to create CSS classes that are “responsive” meaning - I had hoped that different constraints could be used for different screen sizes - but without success.
I (think I) want to operate on the entire grid - but so far my class seems all or nothing - no “responsiveness.”
Can someone help me figure out how to apply a CSS class to ion-grid in a responsive way? Or - tell me how to specify margins (I’m currently using left: 20% -for example) that are “responsive” meaning that I could use different numbers for different sized screens?
I would be most appreciative of any help! thanks!
1 post - 1 participant
↧
↧
How to update user profile in ionic with @angular/fire
async login() {
try {
var r = await this.fAuth.signInWithEmailAndPassword(
this.user.email,
this.user.password
);
if ® {
console.log(“Successfully logged in!”);
…
I didn t find nothing more
1 post - 1 participant
↧
Angular Ionic - Adding new object to the array from reactive form inside
I have an <ion-modal> that contains reactive form on it. The problem is after having filled all the required fields and using push() to add it into the existing array, nothing happens. Here are the snippets:
showcase.page.ts
openAddItemModal() {
this.modalController.create({
component: AddItemPage,
cssClass: 'itemModal',
componentProps: {selectedItem: this.showcases}
})
.then(modalEl=>{
modalEl.present();
return modalEl.dismiss();
});
}
showcase.service.ts
private _items: Item[] = [
new Item('s1', 'Seaside house', 'lorem ipsum', new Date('2019-01-01')),
new Item('s2', 'Terrace house', 'lorem ipsum', new Date('2019-01-01'))
]
addItem(title: string, description: string, dateAdded: Date) {
const newItem = new Item(Math.random().toString(), title, description, dateAdded);
/* Using normal array */
this._items.push(newItem);
}
add-item.page.ts
onAddItem(){
if(!this.form.valid) {
return;
}
this.showcaseService.addItem(this.form.value.title, this.form.value.description, new Date(this.form.value.dateAdded));
this.form.reset();
this.router.navigate(['/showcase/'])
}
This is reactive form inside the
add-item.page.html
<ion-content>
<form [formGroup]="form">
<ion-grid>
<ion-row>
<ion-col size-sm="6" offset-sm="3">
<ion-item>
<ion-label position="floating">Title</ion-label>
<ion-input type="text" formControlName="title"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3">
<ion-item>
<ion-label position="floating">Description</ion-label>
<ion-input type="text" formControlName="description"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row *ngIf="!form.get('description').valid && form.get('description').touched">
<ion-col size-sm="6" offset-sm="3">
<p>Description must be between 1 and 200 characters</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size-sm="6" offset-sm="3">
<ion-item>
<ion-label position="floating">Date added</ion-label>
<ion-datetime
display-format="MMM DD YYYY" formControlName="dateAdded"></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
<ion-row size-sm="6" offset-sm="3">
<ion-button type="submit" color="primary" expand="block" (click)="onAddItem()" [disabled]="!form.valid">Add item</ion-button>
</ion-row>
</ion-grid>
2 posts - 2 participants
↧
Video doesn't play in iOS
So, I’m trying to play a video on the background of an Ionic app. It all goes well on android, but on iOS it does not load. There isn’t any error message logged on the console. I saw 2/3 threads with the same problem, but I couldn’t figure out a solution. Can someone help me, please?
Code:
<video class="video" autoplay muted loop>
<source [src]='videoPath' type="video/mp4">
</video>
this.videoPath = this.videoURL('assets/video/background.webm');
videoURL(url : string) : SafeResourceUrl {
return this.domSanitizer.bypassSecurityTrustResourceUrl(
url
);
}
1 post - 1 participant
↧
What method to call on ion-refresh?
When you open my Ionic / Angular app in the browser of a mobile device (not the native app), pulling down on the page to refresh the page isn’t working like it would on other websites,
I think the solution around this is to add an ion-refresher to the code, but I’m not sure what method I should call when I refresh the page.
At the moment, I have no typescript code, it is all HTML for now, so I’m not sure what methods I need to call to refresh the page.
Can someone please tell me if using ion-refresher is the correct approach to resolve this problem?
2 posts - 2 participants
↧
↧
Wondering how to force a page refresh?
I have searched the forum on this topic and have seen previous threads - so I know the issue is there.
One response was very pure - saying that no refresh should be needed - just update the state and angular should take care of refreshing the page.
However, that doesn’t seem to be the case.
I have a problem (in a web view) with recognizing login state with firebase. On the initial loading - the user appears not to be logged in, and only after some time goes by (using subscribe) does the state change to logged in.
My html uses *ngIf to show the user the login state - either the user isn’t - and is a guest - or he/she is - and I should their name in the caption.
I am not getting any refresh of the page when the state changes - so I’d like to force the update - but that seems difficult.
I saw someone suggest re-navigating to home, but that feels wrong to me. I also saw someone suggest calling ionViewDidEnter() again - but again this doesn’t feel right.
Just thought I would ask again - since some of the previous answers were specific to earlier version of ionic…
Is there a simple way to request a refresh of the page?
thanks in advance! This is probably a naive question -
1 post - 1 participant
↧
Ionic Developer Full Time Job
We are looking for a Full Time experienced Ionic Developer to join our growing team of software engineers. The successful candidate will lead a small team of programmers in moving our unreleased mobile application to ionic 5 and adding new functions. Future work will include layering other API’s onto our app and creating progressive websites for the desktop and on iPads.
Experience with medical transport, mapping, GPS a plus. The position is remote. We prefer inside US or Canada. We offer a competitive salary, hardware allowance, and full benefits package.
About Us
You can send your resume and interest level to dstein@medanswering.com. Please no shops, search firms, or people only interested in contract work.
1 post - 1 participant
↧
Ionic 5: generating an AnimationBuilder for forRoot config
There are many global properties for Ionic config that require AnimationBuilder type (see https://ionicframework.com/docs/angular/config). An AnimationBuilder needs to be created within IonicModule.forRoot() of app.module.ts.
How does one generate an AnimationBuilder inside of app.module.ts when we don’t have access to the Angular service, AnimationController? Ideally I would just like to call the createAnimation function in @ionic/core but this is not exported in @ionic/angular.
1 post - 1 participant
↧
iOS 14 and its effect on Ionic
We are about to start a new project. iOS 14 is out… should we wait for an Ionic 6 or is Ionic 5 safe?
1 post - 1 participant
↧
↧
How to list all mp3 or pdfs stored in the device storage
I want to display all types of files in separate tabs like Videos, Pdfs, Music etc. I have tried using the listDir method of native-file plugin… But to get all files grouped I have to recursively visit each folder which takes too long and affects the performance too as the storage of a regular device is pretty large these days (>=128GB). Is there any other ways to do so?
Here is my code
groupFiles() {
return new Promise((resolve, reject) => {
this.file.listDir(this.file.externalRootDirectory, '').then((data: Array<DirectoryEntry>) => {
data.forEach(e => {
if (e.isDirectory) {
this.promises.push(this.recurseGroup(e));
} else if (e.isFile) {
this.allGroup.push(e);
}
});
resolve();
});
});
}
recurseGroup(entry: DirectoryEntry) {
console.log('called');
return new Promise((resolve, reject) => {
this.file.listDir(entry.nativeURL, '').then((data: Array<DirectoryEntry>) => {
data.forEach(e => {
if (e.isDirectory && e.name !== '.' && e.name !== '..') {
this.promises.push(this.recurseGroup(e));
} else if (e.isFile) {
this.allGroup.push(e);
}
});
resolve();
});
});
}
1 post - 1 participant
↧
Opening local PDFs in Browser
I have a PWA that I have built using ionic 5 and am having an issue loading PDFs with the Capacitor Browser. I am using the following code to load remote PDF documents in the browser:
browserOpen(location) {
Plugins.Browser.open({
url: location,
toolbarColor: "#5A5DF5",
windowName: "_system"
});
}
This is working great. However, when I use the same code to load a PDF that is hosted under the same site that serves the PWA, the pdf opens full screen and has no controls for me to close the window or navigate back to the app. I end up having to close and reopen the app to resume. Does anyone have any insight as to what might be happening or how to force these “local” PDFs to open in the browser?
1 post - 1 participant
↧
SOAP API call using HTTP native in Ionic V5
Is there a way to call SOAP API using the HTTP ionic native(@ionic-native/http/ngx)?
I am able to call the SOAP API using the old school like this, but I am getting the CORS error but I cannot do anything about the endpoint since I do not control it, so I am trying to consume the API using the HTTP Native call to by-pass the CORS error:
soapAPIOld() {
// tslint:disable-next-line:prefer-const
let xmlhttp = new XMLHttpRequest();
xmlhttp.open(‘POST’, ‘https://some.com.ph/?wsdl’, true);
// tslint:disable-next-line:max-line-length
const request =
`<soapenv:Envelope xmlns:soapenv=“http://schemas.xmlsoap.org/soap/envelope/” xmlns:rem=“http://endPointAPI”>
<soapenv:Header/> <soapenv:Body> <rem:apiRequest> </rem:apiRequest> </soapenv:Body></soapenv:Envelope>`;
xmlhttp.onreadystatechange = () => {
if (xmlhttp.readyState === 4) { if (xmlhttp.status === 200) { // tslint:disable-next-line:prefer-const let xml = xmlhttp.responseXML; alert(xmlhttp.responseText); } else { alert('XML response ' + xmlhttp.responseXML); alert(xmlhttp.status); } }};
// Send the POST request
xmlhttp.setRequestHeader(‘Content-Type’, ‘text/xml’);
xmlhttp.responseType = ‘document’;
xmlhttp.send(request);
}
HTTP native call code snippet, I am getting the error response always but when I try it in SOAP UI or Postman, the API call succeeds:
soapAPINative() {
console.log(‘SOAP call’);
// tslint:disable-next-line:max-line-length
const body =
`<soapenv:Envelope xmlns:soapenv=“http://schemas.xmlsoap.org/soap/envelope/” xmlns:rem=“http://endPointAPI”>
<soapenv:Header/> <soapenv:Body> <rem:apiRequest> </rem:apiRequest> </soapenv:Body></soapenv:Envelope>`;
// tslint:disable-next-line:max-line-length
this.http.get(‘https://some.com.ph/?wsdl’, body, {})
.then(data => {
console.log('SUCESS ' + data.status); console.log('SUCESS ' + data.data); console.log('SUCESS ' + data.headers);})
.catch(error => {
console.log('ERROR ' + error.status); console.log('ERROR ' + error.error); console.log('ERROR ' + error.headers);});
}
Any help would be appreciated!
1 post - 1 participant
↧