ngx-back-button

@ngx-back-button

A library for handling a proper angular back button capability

• Handle Browser history
• Handle Fallback when clicking on the back button when not routed yet
• Handle custom Fallback

Demo

• https://stackblitz.com/~/github.com/rbalet/ngx-back-button

Breaking change

Installation

npm install ngx-back-button

Optional configuration

To configure the library, provide the NgxBackButtonService and its configuration globally in your main.ts file:

import { NgxBackButtonServiceProvider } from 'ngx-back-button'

bootstrapApplication(AppComponent, {
  providers: [
    { // This is optional
      provide:  NgxBackButtonServiceProvider,
      useValue: {
        rootUrl: '/custom', // Or any custom root URL
        fallbackPrefix: '/tabs', // For library users
      },
    },
  ],
}).catch((err) => console.error(err));

rootUrl

The default fallback in case you're landing on the page and have nothing to go back to.

fallbackPrefix

Added to the fallback argument.

Use: If you're building a library and wish to put some back button with fallback.

For example, if you build a component with the following:

<button ngxBackButton="/login">
  Back to login
</button>

But inside your app, you always have the /tabs first.

Adding fallbackPrefix: '/tabs' will be the same as if you were doing the following:

<button ngxBackButton="/tabs/login">
  Back to login
</button>

Usage

Directive

import { NgxBackButtonDirective } from 'ngx-back-button'

@Component({
  // ...
  imports: [
    NgxBackButtonDirective,
  ],

Normal use:

<button ngxBackButton>
  Back button
</button>

With Fallback:

<button ngxBackButton="/login">
  Back to login
</button>

Service

// foo.component.ts
import { NgxBackButtonService } from 'ngx-back-button';
// ...

ngxBackButtonService = inject(NgxBackButtonService)

Normal use:

<button (click)="ngxBackButtonService.back()">
  Back button
</button>

With Fallback:

<button (click)="ngxBackButtonService.back('/login')">
  Back to login
</button>

Authors and acknowledgment

• Maintainer Raphaël Balet
• Inspired by Nils Mehlhirn