# ngx-bootstrap-product-tour-mod

> Angular product tour using ngx-bootstrap-mod popover

Latest version **2.0.8** (published 2018-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-bootstrap-product-tour-mod
pnpm add ngx-bootstrap-product-tour-mod
yarn add ngx-bootstrap-product-tour-mod
bun add ngx-bootstrap-product-tour-mod
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.8 |
| Published | 2018-08-09 |
| First published | 2018-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 6.2 MB |
| Known vulnerabilities | 0 (+26 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jesus Ferrer |
| Maintainers | gsusf |
| Keywords | angular, angular2, angular4, angular5, tour, product tour, ngx-bootstrap |

## Links

- npm: https://www.npmjs.com/package/ngx-bootstrap-product-tour-mod
- Repository: https://github.com/gsusferrer/ngx-bootstrap-product-tour-mod
- Homepage: https://github.com/gsusferrer/ngx-bootstrap-product-tour-mod#readme
- Issues: https://github.com/gsusferrer/ngx-bootstrap-product-tour-mod/issues
- npm.io page: https://npm.io/package/ngx-bootstrap-product-tour-mod

## Dependencies (16)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.10
- [core-js](https://npm.io/package/core-js.md) ^2.5.5
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.26
- [bootstrap](https://npm.io/package/bootstrap.md) ^3.3.7
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.2.10
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.2.10
- [ngx-bootstrap](https://npm.io/package/ngx-bootstrap.md) ^2.0.4
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.2.10
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.2.10
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.2.10
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.2.10
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.2.10
- [@angular/platform-server](https://npm.io/package/@angular/platform-server.md) ^5.2.10
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.2.10
- [@nicky-lenaers/ngx-scroll-to](https://npm.io/package/@nicky-lenaers/ngx-scroll-to.md) ^0.6.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.2.10

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.0.8 (latest) — 2018-08-09
- 2.0.7 — 2018-08-09
- 2.0.6 — 2018-08-08
- 2.0.4 — 2018-08-08
- 2.0.3 — 2018-08-07
- 1.0.0 — 2018-08-07

## README

# ngx-bootstrap-product-tour-mod
[![npm version](https://badge.fury.io/js/ngx-bootstrap-product-tour-mod.svg)](https://badge.fury.io/js/ngx-bootstrap-product-tour-mod)
## About

This is a product tour library built with Angular (2+).
`NgxBootstrapProductTourModule` is an implementation of the tour ui that uses [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)  popovers to display tour steps.

For Angular 4 use package version 1.0.6 

For Angular 5 use package version 2.0.x

## Installation

1. `npm i ngx-bootstrap-product-tour-mod ngx-bootstrap bootstrap`
2. Import `NgxBootstrapProductTourModule.forRoot()` into your app module
3. Make sure `RouterModule` is imported in your app module
4. Include bootstrap css.

## Usage

1. Add `<ngx-bootstrap-product-tour-mod></ngx-bootstrap-product-tour-mod>` to your root app component
2. Define anchor points for the tour steps by adding the `tourAnchor` directive throughout your app.

    ```html
    <div tourAnchor="some.anchor.id">...</div>
    ```
3.  Define your tour steps using `tourService.initialize(steps)`

    ```typescript
    this.tourService.initialize([{
      anchorId: 'some.anchor.id',
      content: 'Some content',
      title: 'First',
    }, {
      anchorId: 'another.anchor.id',
      content: 'Other content',
      title: 'Second',
    }]);
    ```
4. Start the tour with `tourService.start()`

## Demo
Demo page can be found [here](https://nmilicic.github.io/ngx-bootstrap-product-tour-mod/) and it's [source code here](https://github.com/NMilicic/ngx-bootstrap-product-tour-mod/tree/master/src//app).

## TourService

The `TourService` controls the tour. Some key functions include

| Function | Description |
| ------------- | ------------- |
| start() | Starts the tour |
| startAt(stepId: number \| string) | Start the tour at the step with stepId or at the specified index |
| end() | Ends the tour |
| pause() | Pauses the tour |
| resume() | Resumes the tour |
| next() | Goes to the next step |
| prev() | Goes to the previous step |

## Step Configuration

Each step can have the following properties.

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| stepId | string |  "" | A unique identifier for the step |
| anchorId | string | required | The anchor to which the step will be attached |
| title | string |  "" | The title of the tour step |
| content | string |  "" | The content text of the tour step |
| route | string | UrlSegment[] | undefined | The route to which the tour should navigate before attempting to show this tour step. If undefined, no navigation is attempted. |
| nextStep | number | string | undefined | The step index or stepId of the next step. If undefined, the next step in the steps array is used. |
| prevStep | number | string | undefined | The step index or stepId of the previous step. If undefined, the previous step in the steps array is used. |
| placement |  'top' \| 'bottom' \| 'right' \| 'left' | 'top' | Where the tour step should placed with respect to the anchor. 
| preventScrolling | boolean | false | Tour steps automatically scroll to the middle of the screen, if they are off the screen when shown. Setting this value to true will disable the scroll behavior. |
| containerClass | string |  "" | Css class for popover container. |
| orphan | boolean |  false | Tour popover will be placed in the center of the screen, must have anchorId but it won't be shown next to that element. |
| promise | promise&lt;any&gt; |  "" | Step shows after promise has been resolved. |
| delay | number |  0 | Time in milliseconds before showing the tour step. |
| backdrop | boolean |  false | Shows/hides backdrop. You need to set backgroud color and z-index on class .tour-backdrop and higher z-index on .tour-step-backdrop. |

## Defaults

You can set default values in the `TourService.initialize` function.
```typescript
this.tourService.initialize(steps, {{ '{' }}
  route: '',
  placement: 'left',
  preventScrolling: true,
});
```
Any value explicitly defined in a step will override the default value.

## Event Observables

The `TourService` emits events that can be subscribed to like this:

```typescript
this.tourService.initialize$.subscribe((steps: IStep[]) => {{ '{' }}
  console.log('tour configured with these steps:', steps);
});
```

| Name | Payload | Emitted When |
| --- | --- | --- |
| stepShow$ | IStep | A step is shown |
| stepHide$ | IStep | A step is hidden |
| initialize$ | IStep[] | The tour is configured with a set of steps |
| start$ | IStep | The tour begins |
| end$ | any | The tour ends |
| pause$ | IStep | The tour is paused |
| resume$ | IStepI | The tour resumes |
| anchorRegister$ | string | An anchor is registered with the tour |
| anchorUnregister$ | string | An anchor is unregistered from the tour |

## Custom template

  You can also customize the tour step template by providing an `<ng-template>` inside the `<ngx-bootstrap-product-tour-mod>`

  The default template is equivalent to this:

```html
<ngx-bootstrap-product-tour-mod>
  <ng-template #tourStep>
    <p class="tour-step-content">{{tourService.currentStep.content}}</p>
    <div class="tour-step-navigation">
      <button *ngIf="tourService.hasPrev(tourService.currentStep)" class="btn btn-sm btn-default" (click)="tourService.prev()">« Prev</button>
      <button *ngIf="tourService.hasNext(tourService.currentStep)" class="btn btn-sm btn-default" (click)="tourService.next()">Next »</button>
      <button class="btn btn-sm btn-error" (click)="tourService.end()">End</button>
    </div>
  </ng-template>
</ngx-bootstrap-product-tour-mod>
```

---
_Source: https://npm.io/package/ngx-bootstrap-product-tour-mod · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._