ngx-back-button
TypeScript icon, indicating that this package has built-in type declarations

17.0.1 • Public • Published

@ngx-back-button npm version

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

Installation

npm install ngx-back-button

Inside your app.module.ts file.

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

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

    // Or
    NgxBackButtonModule.forRoot({
      rootUrl: '/custom', // Or any custom root url
      fallbackPrefix: '/tabs' // For libraries users
    }),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => null,
      deps: [NgxBackButtonService],
      multi: true,
    },
  ]

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

Package Sidebar

Install

npm i ngx-back-button

Weekly Downloads

20

Version

17.0.1

License

MIT

Unpacked Size

33.9 kB

Total Files

18

Last publish

Collaborators

  • rbalet