@ngx-back-button

A library for handling a proper angular back button capability

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

Demo

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

Breaking change

Installation

npm install ngx-back-button

Optional configuration

Using provider functions (Recommended)

To configure the library, use the provideNgxBackButton function in your application providers:

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

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

Child route configuration

You can override the configuration for specific routes using provideNgxBackButtonChild:

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

export const routes: Routes = [
  {
    path: 'admin',
    providers: [
      provideNgxBackButtonChild({
        rootUrl: '/admin/dashboard'
      })
    ],
    loadComponent: () => import('./admin/admin.component')
  }
]

Alternative configuration (Legacy)

You can also configure the library by providing the service configuration directly:

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>

Note: When using the service directly (instead of the directive), it will use the root configuration by default. If you need to use a child route configuration, you should inject and pass it manually:

import { inject } from '@angular/core';
import { NgxBackButtonService, NgxBackButtonServiceProvider } from 'ngx-back-button';

export class MyComponent {
  private ngxBackButtonService = inject(NgxBackButtonService)
  private config = inject(NgxBackButtonServiceProvider, { optional: true })
  
  goBack() {
    this.ngxBackButtonService.back(undefined, this.config)
  }
}

For most use cases, it's recommended to use the directive, which handles this automatically.

Authors and acknowledgment

• Maintainer Raphaël Balet
• Inspired by Nils Mehlhirn