I’m also using the Plugin and it works fine for me (with ionic 5 and Cordova). I don’t know if there are any problems in combination with Capacitor. Try reinstalling the Plugin and the Ionic Native Wrapper.
How to open Dialer in ionic V5?
Ionic 5 IOS Header - does it really look like this?
Is this really what headers with an icon are meant to look like on IOS devices? I don’t use i-phones, so no idea what the header is meant to look like.
Ionic 5 IOS Header - does it really look like this?
This is a Large Title on iOS. So basically yes. Here is a Documentation. Typical for iOS is, that if you have a Large Title and a scrollable Content and you scroll down, the Large Header becomes a normal one. Ionic has also Support for that, see here: https://ionicframework.com/docs/api/title#collapsible-large-titles
How to pass data from 1 page to another using navigation in Ionic 4?
i have to pass tthe array will this help me ?
How to pass data from blank page to tabs page in ionic 4
I am new to ionic.
I want to pass the parameter from one page to the tabs page.
Basically it’s a place list. On click of the item, I want to pass place_id to place tab pages.
There are 3 tabs: Place Detail, Member List, Events.
I want to pass place_id to all pages.
On click of an item if I pass a parameter to the tabs page it won’t work. But without parameter, it works perfectly. It goes to the tabs page.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: 'tab',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},
{
path: 'member-detail',
loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
},
{
path: 'member-detail/:userId',
loadChildren: () => import('./member-detail/member-detail.module').then( m => m.MemberDetailPageModule)
},
{
path: '',
loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
},
{
path: 'register',
loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
},
{
path: 'forgot-password',
loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
},
{
path: 'otp',
loadChildren: () => import('./otp/otp.module').then( m => m.OtpPageModule)
},
{
path: 'edit-profile',
loadChildren: () => import('./edit-profile/edit-profile.module').then( m => m.EditProfilePageModule)
},
{
path: 'forgot-change-password',
loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
},
{
path: 'forgot-change-password/:contact',
loadChildren: () => import('./forgot-change-password/forgot-change-password.module').then( m => m.ForgotChangePasswordPageModule)
},
{
path: 'member-list',
loadChildren: () => import('./member-list/member-list.module').then( m => m.MemberListPageModule)
},
{
path: 'places',
loadChildren: () => import('./places/places.module').then( m => m.PlacesPageModule)
},
// {
// path: 'place-tab',
// loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
// },
{
path: 'place-tab/:placeId',
loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
},
{
path: '',
loadChildren: () => import('./place-tab/place-tab.module').then( m => m.PlaceTabPageModule)
},
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
places.page.ts
placeDetail(placeId: string) {
console.log(placeId);
this.router.navigate(['/place-tab/', placeId]);
// this.router.navigateByUrl('/place-tab');
}
place-tab.page.ts
export class PlaceTabPage {
placeId: any;
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.params.subscribe(params => {
this.placeId = params['placeId'];
});
console.log(this.placeId);
}
}
place-tab-routing.module.ts
const routes: Routes = [
{
path: 'place-tab',
component: PlaceTabPage,
children: [
{
path: 'place-detail',
children: [
{
path: '',
loadChildren: () =>
import('../place-detail/place-detail.module').then(m => m.PlaceDetailPageModule)
}
]
},
{
path: 'place-member',
children: [
{
path: '',
loadChildren: () =>
import('../place-member/place-member.module').then(m => m.PlaceMemberPageModule)
}
]
},
{
path: 'place-event',
children: [
{
path: '',
loadChildren: () =>
import('../place-event/place-event.module').then(m => m.PlaceEventPageModule)
}
]
},
{
path: '',
redirectTo: '/place-tab/place-detail',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/place-tab/place-detail',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class PlaceTabPageRoutingModule { }
Download file pdf from rest
Hi everyone, I’m trying to download a pdf on my Ionic App but i can’t make it work. First of all, my endpoint is:
router.get('/invoices', async(req, res) => {
// View logged in user profile
try{
let pdf_name = req.query.param1;
const file = '../rest_api_ionic/invoices/' + pdf_name;
res.download(file); // Set disposition and send it.
}catch(error){
res.status(404).send(error);
}
})
When i use browser it works but on Ionic doesn’t. I’m trying to use (https://ionicframework.com/docs/native/file-transfer) but i can’t make it work.
Ionic
import {DocumentViewer, DocumentViewerOptions} from '@ionic-native/document-viewer/ngx';
import {File} from '@ionic-native/file/ngx';
import {FileTransfer} from '@ionic-native/file-transfer/ngx';
downloadAndOpenPdf(){
let path = null;
if(this.platform.is('ios')){
path = this.file.documentsDirectory;
}else{
path = this.file.dataDirectory;
}
const transfer = this.transfer.create();
transfer.download('url', path + "myfile.pdf").then(entry =>{
let url = entry.toURL();
console.log(url);
this.document.viewDocument(url, 'application/pdf', {});
})
}
When I import i have to specified ‘/ngx’ and I don’t know why. I just want to download it on my downloads folder.
Ionic ios app not emulating to ios simulator through cli commands
Hi,
I am starting to create new app with latest ionic version.
I got the following info through ionic info command
Ionic:
Ionic CLI : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.0
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : 0.3.0
System:
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v12.16.0 (/usr/local/bin/node)
npm : 6.13.7
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504
I just followed the following steps
npm install -g @ionic/cli
ionic start myApp tabs
cd myApp
ionic serve
when i run ionic serve i get the web page opened automatically.
and then i have added the ios developer account to the xcode
xcode-select --install
npm install -g ios-sim
brew install ios-deploy
ionic cordova prepare ios
ionic cordova run ios -l --external
so finally when i run the cli command. I get the simulator opened automatically and some popup verifying myapp.app and close after few seconds after that app not installed in simulator.
It works when I run manually from xcode.
Please help me to get the “ionic cordova run ios -l --external” command run successfully.
Thanks for all
How to pass data from blank page to tabs page in ionic 4
I pass all data through the state: https://ionicacademy.com/pass-data-angular-router-ionic-4/ (Point 3)
How to pass data from 1 page to another using navigation in Ionic 4?
I only pass data through the Angular Extras State: https://ionicacademy.com/pass-data-angular-router-ionic-4/ (Option 3)
Problem installing Google Plus plugin
saved my day! this works for me
Can we open a pop up when notification received
Hi, I want to open a pop up when notification received with out interacting with notification. It should work even when app is killed.
Gestures with Angular bindings
Is this a bug in Ionic? Over on StackOverflow I received this suggestion: https://stackoverflow.com/a/60257647/1775470
But it looks more like a workaround to me…
Disable checkbox from activating on container click
Hello, everyone, I am using Ionic V5 here and I enjoy it a lot!
But being a newbie I have the following problem which gave me quite the challenge.
I have an ion-card which contains an ion-checkbox and other elements. Whenever I click on the ion-card or on any element inside it the checkbox will activate. How do I stop this from happening?
<ion-card>
<ion-card-content>
<ion-item (click)="handleServiceClick($event, service.id)">
<ion-checkbox color="primary" slot="start" [checked]="service.isChecked"></ion-checkbox>
<ion-label> {{ service.title }}</ion-label>
<ion-button (click)="handleMoreInfoClick($event)">
<ion-icon name="information-circle-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-card-content>
</ion-card>
Thank you,
Ionic 4 released January 2019, now we have Ionic 5
Ionic 5 is here
Json Array when click every item shift to first of list(recently used in first)
Hi
I have a json with som item. I want when clicked on any item, that`s come to first. I need recently used show in first. in next time open application
Ionic3 cordova woo-commerce android app freeze while opening product page
يمكنك الآن التسوق من موقعنا للحصول على أفضل جودة وأحدث اتجاهات العباءة. زيارة موقع بيهس للعبايات الراقية لمزيد من المعلومات.
Ionic 4 ios build constuctor not calling in app and splash screen not hidding
I guess but when i rewrite the application in ios just copy paste the code in new application it works every thing working fine but i didn`t reconise the issue but i thing this issule is related to routing app
Error: Can't resolve all parameters for HomePage (NativeStorage)
Hi and thank you very much to all of you!
I’m having the followin error: Error: Uncaught (in promise): Error: Can’t resolve all parameters for HomePage: (?).
I installed the NativeStorage plugin with:
- ionic cordova plugin add cordova-plugin-nativestorage
- npm install @ionic-native/native-storage
Then I open the app.module.ts and it looks like this:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;
import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { NativeStorage } from ‘@ionic-native/native-storage/ngx’;
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
NativeStorage,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
And my homepage it’s like this:
import { Component, OnInit } from ‘@angular/core’;
import { NativeStorage } from ‘@ionic-native/native-storage/ngx’;
@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})
export class HomePage implements OnInit {
constructor(public nativeStorage: NativeStorage) {}
ngOnInit() {
}
}
But I’m getting the same error!!!
Any thoughts?
Thanks in advance
Ionic dynamic menu
iOS App stuck at white Screen after SplashScreen
It seems like this is an other problem. I tried to re build the project, now this error seems to be gone.
But the build always fails.
The Error message is:
diff: Podfile.lock not found
diff: Manifest.lock not found
the sandbox is not in sync with the Podfile. Try pod install
I tried pod install and pod update several times, and adding those files manually to the build phase.
I looked through so many forums and really nothing helped…
I contacted the apple developer support… lets see if they are able to help…