How to Hide Keyboard in ionic3?
We have a problem with ionic 3 apps during testing in iPhone. After fillup Payment Gateway information (which is launched in iFrame), Whenever we go to the back page using the back button, Keyboard is not Hiding.
We used cordova-plugin-ionic-keyboard and use Keyboard.hide() method. But didn't work.
Using Keyboard plugin for Cordova:
import { Keyboard } from '#ionic-native/keyboard/ngx';
...
constructor(private keyboard: Keyboard) { }
...
this.keyboard.show();
this.keyboard.hide();
Or if you are using Capacitor (recommended):
import { Plugins, KeyboardInfo } from '#capacitor/core';
const { Keyboard } = Plugins;
...
Keyboard.show();
Keyboard.hide();
Try this
import { Keyboard } from '#ionic-native/keyboard';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public keyboard : Keyboard) {
}
}
and then on back button use this
this.keyboard.close()
Related
My problem is quite simple : I try to implement a component in modal, but when I try to add SwipeToClose, it's not working (The modal stay static even if I try to swipe down) ...
I'm really confused, but I've create a Stackblitz to show you my issue in detail, maybe I miss something important ... : https://stackblitz.com/edit/ionic-angular-v5-u4wmun
My component :
import { Component, Injectable } from '#angular/core';
import { NavController, ModalController } from '#ionic/angular';
import { ModalComponent } from './modal/modal.component';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myModal:any;
constructor(
public modalController: ModalController
) {
}
async presentModal() {
this.myModal = await this.modalController.create({
component: ModalComponent,
swipeToClose: true,
backdropDismiss: true
});
return await this.myModal.present();
}
}
Thanks to your time !
PS : I try to use it in iOS only, I've already try on my iOS device and it's doesn't work too ...
swipe to close is only available for modals in ios mode(currently ionic v5). So, specify the mode of your modal to be ios
this.myModal = await this.modalController.create({
component: ModalComponent,
swipeToClose: true,
mode: 'ios',
backdropDismiss: true
});
SwipeToClose Gesture only works on IOS mode and could be applied on card modals and will be deprecated by next release. If you apply following method to IonContent element or first element in body, it detects swipeDown gesture and kinda solves that issue and works with all modes.
constructor(public gestureCtrl: GestureController) { }
swipeDownToCloseModal = (elm: HTMLElement)=>{
const swipeGesture: Gesture = this.gestureCtrl.create({
el:elm,
threshold:1,
maxAngle:95,
gestureName:'swipeGesture',
onEnd:e=>{
if(e.velocityY>0.15 && e.deltaY>100 && elm.getBoundingClientRect().y===0){
this.modal.dismiss(); //change
}
}
});
swipeGesture.enable(true);
};
In my project i have a tab-bar which contains out of 3 tabs. But when my project starts i want to redirect to a page that doesn't exist in the tab-bar and to see if the user is logedin and then redirect to one of the tabs again.
At the page outside of the tabs i dont want to show the tabs (obviously) but then on all other pages i want the tabs to be shown. I have simplyfied my code so that its only the code needed.
app.component.ts
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage:any = TabsPage;
constructor(public oneSignal: OneSignal, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//this.nav.push(Test);
//this.nav.setRoot(Test);
this.rootPage = Test;
statusBar.styleDefault();
splashScreen.hide();
});
}
}
Here is my page which i redirects to:
#Component({
templateUrl: 'test.html'
})
export class Test {
rootPage:any;
constructor(private natCtrl: NavController) {
}
ionViewDidEnter(){
this.rootPage = TabsPage;
this.natCtrl.setRoot(ContactPage);
}
}
As you can see the tabs isn't there.
I have tried many different ways to do this including push, setroot etc etc.
The ionViewDidLoad function seem to get called twice, which is causing multiple views being created of AddressPage. I have debugged this and it looks like whenever data is updated the new instance of view gets created. This behaviour seems to happen only when I use fireabse to save the address. If I comment out the code to save the address new view is not created and app navigates to previous screen.
Any way to avoid this?
I have tried ViewCotnroller.dismiss() and NavController.pop() inside saveAddress method but non seem to avoid creation of new view.
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar) {
platform.ready().then(() => {
statusBar.styleDefault();
statusBar.backgroundColorByHexString('#1572b5');
});
}
}
Home Page
import {NavController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public firebaseProvider:
FirebaseProvider) {
}
//navigate to different view
navigate(){
this.navCtrl.push(AddressPage, {address:newAddress});
}
}
Address Page
import {NavController } from 'ionic-angular';
#Component({
selector: 'page-address',
templateUrl: 'address.html'
})
export class AddressPage {
constructor(public navCtrl: NavController, public firebaseProvider:
FirebaseProvider, private navParams: NavParams) {
this.addressKey = this.navParams.get('key');
}
ionViewDidEnter(){
//load some data from server
}
saveAddress(){
//save data to server
this.firebaseProvider.saveAddress(newAddress);
//move back
this.navCtrl.pop();
}
}
Firebase provider that uses AngularFireDatabase
import { Injectable } from '#angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
#Injectable()
export class FirebaseProvider {
constructor(public afd: AngularFireDatabase) { }
saveAddress(address) {
this.afd.list('/addresses').push(address);
}
updateAddress(key,dataToUpdate){
return this.afd.list('addresses').update(key,dataToUpdate);
}
}
I have also tried this but it has the same issue.
this.firebaseProvider.saveAddress(newAddress).then(result => {
// loadingSpinner.dismiss();
this.navCtrl.pop();
});
this.firebaseProvider.updateAddress(this.addressKey, updateItems)
.then(() => {
// loadingSpinner.dismiss();
this.navCtrl.pop()
});
The HTML of save button
<button type="button" ion-button full color="primary-blue" (click)='saveAddress()'>Save</button>
Looks like unsubscribing to the subscribers fixes the issue. The HomePage view had subscribers which were not unsubscribed. I added the Observable Subscriptions into the array and unsubscribed as per code below.
ionViewWillLeave(){
this.subscriptions.forEach(item=>{
item.unsubscribe();
});
}
the push method returs a promise with the result of the action. I would change the save method like this:
saveAddress(address) {
return this.afd.list('/addresses').push(address);
}
Then in the controller I’d change it in this way:
saveAddress(){
//save data to serve
this.firebaseProvider.saveAddress(newAddress).then(result => {
//do yours validations
this.navCtrl.pop();
});
}
With thos you tide up the navigation of the page to the result of the Firebase execution. Give it a try to this approach and let me know if it didn’t work, anyway I would use oninit to load data only once as I guess you wanna do it rather than ionViewDidEnter.
How to do a navCtrl.setRoot(Page) without the tabs?
I foun a solution for Ionic2 but can't find it to the version 3.
this.navCtrl.setRoot(LoginPage);
import { NavController, App } from 'ionic-angular';
constructor(public app: App){}
// On your method, add code below
this.app.getRootNav().setRoot(SigninPage)
To show your page without tabs you need to get root of your navCtrl by using getRootNav() method.
import { NavController, App } from 'ionic-angular';
constructor(public navCtrl: NavController, public app: App){
}
any_method(){
this.app.getRootNav(Page);
}
More details of this can be read from this documentation: Navigating from an overlay component
After going through Clear History and Reload Page on Login/Logout Using Ionic Framework
I want to know same question, but for ionic2 using typescript.
On login and logout I need reload the app.ts, because there are classes that run libraries on construct.
it would be basically redirect to home and reload.
Found this answer here, (please note especially the line this.navCtrl.setRoot(this.navCtrl.getActive().component); which is by far the simplest solution that I've come across to reload present page for Ionic 2 & 3 and later versions of Angular (mine is 4), so credit due accordingly:
RELOAD CURRENT PAGE
import { Component } from '#angular/core';
import { NavController, ModalController} from 'ionic-angular';
#Component({
selector: 'page-example',
templateUrl: 'example.html'
})
export class ExamplePage {
public someVar: any;
constructor(public navCtrl: NavController, private modalCtrl: ModalController) {
}
refreshPage() {
this.navCtrl.setRoot(this.navCtrl.getActive().component);
}
}
If you want to RELOAD A DIFFERENT PAGE please use the following (note this.navCtrl.setRoot(HomePage);:
import { Component } from '#angular/core';
import { NavController, ModalController} from 'ionic-angular';
import { HomePage } from'../home/home';
#Component({
selector: 'page-example',
templateUrl: 'example.html'
})
export class ExamplePage {
public someVar: any;
constructor(public navCtrl: NavController, private modalCtrl: ModalController) {
}
directToNewPage() {
this.navCtrl.setRoot(HomePage);
}
}
Ionic 1
I haven't used Ionic 2 but currently i m using Ionic 1.2 and if they are still using ui-router than you can use reload: true in ui-sref
or you can add below code to your logout controller
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
Angular 2
Use
$window.location.reload();
or
location.reload();
You have to implement the CanReuse interface, and override the routerCanReuse to return false. Then, try calling router.renavigate().
Your component should look like this:
class MyComponent implements CanReuse {
// your code here...
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) {
return false;
}
}
And then, when you perform login/logout, call:
// navigate to home
router.renavigate()
This is a hack, but it works.
Wrap the logic that follows your template adjustment in a setTimeout and that gives the browser a moment to do the refresh:
/* my code which adjusts the ng 2 html template in some way */
setTimeout(function() {
/* processing which follows the template change */
}, 100);
For ionic 2 it works for me when you force page reload by triggering fireWillEnter on a view controller
viewController.fireWillEnter();
Here is what worked for me to refresh only current page-
I am trying to call refreshMe function when I call onDelete from my view page,
See how my page.ts file looks-
export class MyPage {
lines of code goes here like
public arr1: any;
public arr2: any;
public constructor(private nav: NavController, navParams: NavParams) {
this.nav = nav;
this.arr1 = [];
this.arr2 = [];
// console.log("hey array");
}
onDelete() {
perform this set of tasks...
...
...
refreshMe()
}
refreshMe() {
this.nav.setRoot(MyPage);
}
}
This is just refreshing only current page.
We can also call this function from view if we need as--
<ion-col width-60 offset-30 (click)="refreshMe()">
....
....
</ion-col>
I personally use these three lines to totally refresh a component
let active = this.navCtrl.getActive(); // or getByIndex(int) if you know it
this.navCtrl.remove(active.index);
this.navCtrl.push(active.component);
You can use the ionViewWillLeave() to display your splashscreen while component is reloading and then hide it with ionViewDidEnter() once its loaded.
Hope it helps