Ionic 4 Back Button (Angular)

Why don’t you declare your detail page in app-routing.module?

Now that we removed the detail module from the page module I think we should reinject it in routing

Sorry for the back and forth, your app is open source? I could give a try?

1 Like

I get the same result when I leave it in the AppRoutingModule (Error when I remove the AgendaDetailPageModule import from AgendaPageModule and faulty routing when I leave the import in).

Unfortunately the app is not open source and not in any openly accessible repository either (and I can’t put it in one).

Thank you for your help so far, this has me stumped…

Mmmh I’ve to say I’m a bit out of idea, difficult to point out the problem without having the all picture sorry

I understand. Thank you for trying and have a nice weekend!

1 Like

You too

Just to summarize my idea which seems to work here: One page (main or detail) = one module = one declaration in the routing for the navigation

Can you give this a try. I had faced the same issue and had to add “href” attribute to redirect to home component for back button functionality

 <ion-buttons slot="start">
      <ion-back-button  defaultHref="home"></ion-back-button>
    </ion-buttons>
13 Likes

When I set the defaultHref attribute the button shows up. Thanks!

1 Like

welcome :slight_smile:

Physical Back Button and Back Button Menu:

defaultHref makes the button show up on mine too…unfortunately, now it seems to show constantly. Even when there shouldn’t be anything in the navigation stack. Any chance you have that same behavior?

1 Like

Hi, I moved the header to its own component and gave that a hasMenu attribute which determines in the template if the menu oder back button should show, like so:

<ion-menu-button *ngIf="hasMenu"></ion-menu-button>
<ion-back-button *ngIf="!hasMenu" [text]='' [defaultHref]="target"></ion-back-button>

Never tried it without that.

1 Like

<ion-buttons slot=“start”> <ion-back-button ></ion-back-button> </ion-buttons>

This is dump, I mean Ionic back button itself, totally useless, but I solved the issue by creating my own service and component to replace it, so:

Service:

import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class PreviousRouteService {

  private previousUrl: string;
  private currentUrl: string;

  constructor(private _router: Router) {
    this.currentUrl = this._router.url;
    _router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.previousUrl = this.currentUrl;
        this.currentUrl = event.url;
      }
    });
  }

  public getPreviousUrl() {
    return this.previousUrl;
  }
}

And then component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-back-button',
  template: `
<ion-button [href]="href" color="light">
  <ion-icon slot="start" name="arrow-back" ></ion-icon>
  Back
</ion-button>
`,
  styleUrls: ['./app-back-button.scss']
})
export class AppBackButton {
  @Input() href: string;

  constructor() {
    if (!this.href) {
      console.warn('Href for app-back-button is not set');
    }
  }
}

And inside my page component template where I use my component instead of ionic one:

<ion-buttons slot="start">
  <app-back-button [href]="previousPage"></app-back-button>
</ion-buttons>

And for previousPage I use router inside my page component class:

constructor(private _router: Router, private _previousRouteService: PreviousRouteService) {

    this._router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.previousPage = _previousRouteService.getPreviousUrl();
        if (!this.previousPage || this.previousPage.length <= 2) {
          this.previousPage = '/home';
        }
      }
    });

}

Could be much cleaner as I can move the last block of code to be inside the component, but for now, this is a quick draft that worked for me, at least it is 100% better than the one provided by Ionic.

4 Likes

What i did is the following:

    <ion-buttons slot="start">
      <ion-button color="dark" (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
  goBack() {
    this.navCtrl.goBack();
  }

Thanks. In case someone is interested in more details and tweaking use back-button doc

Is this the only way of getting this button swap?

I may be getting something really wrong. Just couldn’t get <ion-menu-button> changing to <ion-back-button> yet when there’s history. Just posted here the code: https://github.com/ionic-team/ionic/issues/15316 - it would be awesome if someone that has already solved something similar could take a look.

1 Like

thank very much. this is a much more through solution. this is valuable for a scenario in which the previous page can not be ‘pre-determined’. for example, a page that can be accessed via multiple routes.

Thanks. I got solution to Back button

Maybe too late but i solved the issue by creating the component like this

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { IonRouterOutlet } from '@ionic/angular';

@Component({
    selector   : 'app-header',
    templateUrl: './header.component.html',
    styleUrls  : ['./header.component.scss']
})
export class HeaderComponent implements OnInit, OnDestroy {
    private routerEvents: any;
    private previousUrl: string;
    private currentUrl: string;
    private canGoBack: boolean;

    constructor(
        private router: Router,
        private ionRouterOutlet: IonRouterOutlet
    ) {

    }

    ngOnInit() {
        this.canGoBack    = this.ionRouterOutlet.canGoBack();
        this.currentUrl   = this.router.url;
        this.routerEvents = this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                this.previousUrl = this.currentUrl;
                this.currentUrl  = event.url;
            }
        });
    }

    ngOnDestroy() {
        this.routerEvents.unsubscribe();
    }

}

<ion-header class="app-header">
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button *ngIf="canGoBack" defaultHref="previousUrl"></ion-back-button>
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

3 Likes