https://github.com/rbalet/ngx-back-button

Angular back button
https://github.com/rbalet/ngx-back-button

Last synced: about 2 months ago
JSON representation

Angular back button

• Host: GitHub
• URL: https://github.com/rbalet/ngx-back-button
• Owner: rbalet
• License: mit
• Created: 2023-05-14T09:11:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-15T08:05:23.000Z (11 months ago)
• Last Synced: 2024-03-15T10:12:27.991Z (10 months ago)
• Language: TypeScript
• Size: 686 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - ngx-back-button - A library for handling proper Angular back button capability. (Table of contents / Third Party Components)
• awesome-angular - ngx-back-button - A library for handling proper Angular back button capability. (Table of contents / Third Party Components)

README

        
# @ngx-back-button 

A library for handling a proper angular back button capability

![NPM](https://img.shields.io/npm/l/ngx-back-button)

[![npm version](https://img.shields.io/npm/v/ngx-back-button.svg)](https://www.npmjs.com/package/ngx-back-button)

![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-back-button)

![npm](https://img.shields.io/npm/dm/ngx-back-button)

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

## Installation

```sh

npm install ngx-back-button

```

Inside your `app.module.ts` file.

```typescript

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 

```html

  Back to login

```

But inside your app, you always have the `/tabs` first.

Adding `fallbackPrefix: '/tabs'` will be the same as if you were doing the following

```html

  Back to login

```

## Usage

Wherever you plan to use the back button logic

```typescript

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

imports: [

  NgxBackButtonModule,

]

```

Then you can use it in two different way

### Directive

Normal use

```html

  Back button

```

With Fallback

```html

  Back to login

```

### Service

```typescript

// foo.component.ts

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

// ...

 constructor(public ngxBackButtonService: NgxBackButtonService) {}

```

Normal use

```html

  Back button

```

With Fallback

```html

  Back to login

```

## Authors and acknowledgment

* maintainer [Raphaël Balet](https://github.com/rbalet)

* Inspired by [Nils Mehlhirn](https://nils-mehlhorn.de/posts/angular-navigate-back-previous-page/)

[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)