How to disable swipe back gesture globally in ionic 4 angular project

Question

Already tried to achieve this with:

<ion-router-outlet swipeGesture="false" animated="false"></ion-router-outlet>

and in app.module:

IonicModule.forRoot({
    swipeBackEnabled: false
}),

config.xml:

<preference name="AllowBackForwardNavigationGestures" value="false" />

..but horizontal swipe gestures still trigger navigation to other pages :-(

Possible ways i can think of and tried partially but unsuccessfully are:

use deprecated ionic navController somehow?
use hammerJS?
use undocumented GestureController (https://github.com/ionic-team/ionic/tree/a77ee2a6f88e8defb1763b71e77410264fafac70/core/src/utils/gesture)

If someone can point in the right direction or provide an example how to disable swiping, mainly for iOS, i would be very glad, thx a lot

@AndreasGassmann unfortunately not - i am working around it - watching routes and redirect accordingly, but not satisfying at all. — Markus Kösel, Dec 20 '18 at 13:35
@AndreasGassmann thank you, i was just missing the brackets around swipeGesture. gosh :-D — Markus Kösel, Dec 20 '18 at 13:57

score 31 · Accepted Answer · answered Dec 20 '18 at 13:43

31

I solved it by adding [swipeGesture]="false" to the ion-router-outlet as described here: https://github.com/ionic-team/ionic/issues/16441

At first, I made the mistake of adding it to all ion-router-outlets in my tabs.html file. That didn't work. Instead, you only have to add it to the ion-router-outlet in the app.component.html file. That did the trick for me.

app.component.html

<ion-app>
  <ion-router-outlet [swipeGesture]="false"></ion-router-outlet>
</ion-app>

I'm using ionic version 4.0.0-beta.17.

answered Dec 20 '18 at 13:43

Andreas Gassmann

6,334
7
32
45

This is nice and all, but has the global config been working for anyone yet? – Jay Ordway Mar 16 '19 at 11:44
3

This doesn't work on child pages having back button. – Vikas Baru May 10 '19 at 07:41
Surprisingly contrary to the other comments, this is working for me on my only existing `ion-router-outlet` inside `app.component.html` for `"@ionic/angular": "^4.7.1"` – Aaron Jordan Aug 08 '19 at 15:48

score -1 · Answer 2 · edited Sep 11 '19 at 08:17

-1

<ion-menu [swipeGesture]="false"> </ion-menu>

in Ionic4 version (To remove SwipeGesture in all pages)

edited Sep 11 '19 at 08:17

barbsan

3,418
11
21
28

answered Sep 11 '19 at 07:58

chakri amar

1
2

How to disable swipe back gesture globally in ionic 4 angular project

2 Answers2