Skip to content

rbalet/ngx-back-button

Folders and files

NameName
Last commit message
Last commit date

Latest commit

662b9b2 · Jan 13, 2025

History

46 Commits
Nov 14, 2024
May 14, 2023
Jan 13, 2025
May 14, 2023
May 14, 2023
May 14, 2023
Nov 5, 2024
Nov 5, 2024
Jan 13, 2025
Jan 13, 2025
Jan 13, 2025
Jan 13, 2025

Repository files navigation

@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