Home Original page

GitHub - rbalet/ngx-back-button: Angular back button

@ngx-back-button

A library for handling a proper angular back button capability

NPM npm version npm bundle size npm

  1. Handle Browser history
  2. Handle Fallback when clicking on the back button when not routed yet
  3. Handle custom Fallback

Demo

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

BuyMeACoffee