Home

Awesome

@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

Installation

npm install ngx-back-button

Inside your app.module.ts file.

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

  imports: [
    NgxBackButtonModule.forRoot({}), // Default rootUrl === '/'

    // Or
    NgxBackButtonModule.forRoot({
      rootUrl: '/custom', // Or any custom root url
      fallbackPrefix: '/tabs' // For libraries users
    }),
  ],

rootUrl

The default fallback in case your landing on the page and have nothing to go back to

fallbackPrefix

Added to the fallback argument.

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

Let say, you build a component that have 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

Wherever you plan to use the back button logic

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

imports: [
  NgxBackButtonModule,
]

Then you can use it in two different way

Directive

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'

// ...
 constructor(public ngxBackButtonService: 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