How remove/hide back arrow in Cordova UWP (Ionic 4)?

Question

I'm currently working on an Ionic 4 Application (Angular) available for Windows 10 (UWP).

I would like to hide the arrow back :

I tried these solutions, in my app.component constructor with initializeApp() : How to hide/remove Ionic 4 Cordova Windows 10 app back button?

But nothing is working, I also tried to use in ionViewDidEnter and also in the first page in my app with a 5 seconds timeout.

The method to Windows.core is called after everything is loaded. My app.component.ts is routed via tabs to my authentication page.

app.component.ts

    constructor(
...
  ) {
    this.initializeApp();
    this.setLanguageSettings();
  }

  private async initializeApp() {
    await this.platform.ready();
    if (this.platform.is('cordova') && cordova.platformId === 'windows') {
      setTimeout(() => this.hideWindowsTitleBackArrow(), 1000);
    }


  private hideWindowsTitleBackArrow(): void {
    console.log('hiding-first');
    try {
      const w: any = window;
      if (w.cordova.platformId === 'windows') {
        const currentView = w.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
        currentView.AppViewBackButtonVisibility =
          w.Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
      }
    } catch (error) {
      console.error(`Error in hideWindowsTitleBackArrow: ${error}`);
    }
  }

Ionic info :

ionic info

Ionic:

   Ionic CLI                     : 5.4.6
   Ionic Framework               : @ionic/angular 4.11.8
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : windows 7.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.1, (and 11 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.9

System:

   NodeJS : v10.15.3 (C:\Tools\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Corentin Jacob Corentin Jacob · Accepted Answer · 2020-02-25T15:00:44

Finally find the solution,

The initial solution was right, but the explanation is coming from cordova.js code:

     if (navigator.appVersion.indexOf('MSAppHost/3.0') !== -1) { // Windows 10 UWP (PC/Tablet/Phone)
    var navigationManager = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
    // Inject a listener for the backbutton on the document.
    backButtonChannel.onHasSubscribersChange = function () {
        // If we just attached the first handler or detached the last handler,
        // let native know we need to override the back button.
        navigationManager.appViewBackButtonVisibility = (this.numHandlers > 0) ?
            Windows.UI.Core.AppViewBackButtonVisibility.visible :
            Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
    };

Cordova show the back button after a page suscribe to the back event. In Ionic 4 case, I need to implement like in the example but I had to put more time to let my app be loaded.

Here's the code to implement in app.component.ts :

initializeApp() {
    this.platform.ready().then(() => {
      if (this.platform.is('cordova')) {
        // Waiting cordova.js to load it to override it after the real loading
        setTimeout(() => {
          this.hideUWPBackButton();
        }, 3000);
      }
    });
  }

  public hideUWPBackButton() {
    try {
      const win: any = window;
      if (cordova.platformId === 'windows') {
        const currentView = win.Windows.UI.Core.SystemNavigationManager.getForCurrentView();
        currentView.appViewBackButtonVisibility =
          win.Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
      }
    } catch (error) {
      console.error(`Error in hideWindowsTitleBackArrow: ${error}`);
    }
  }

How remove/hide back arrow in Cordova UWP (Ionic 4)?

1 Answers