![Ngx UI Tour](https://user-images.githubusercontent.com/768105/130578626-8b6cbefb-217c-4943-8661-22459a7b67a3.png)

> UI tour library for Angular

Angular Material, Ionic, PrimeNG, Taiga UI, NG ZORRO and Ng Bootstrap UIs are supported.

`ngx-ui-tour` is a fork of __Isaac Mann's__ `ngx-tour`. The project had to be forked since the original is no longer 
maintained.

---

[![npm](https://img.shields.io/npm/dt/ngx-ui-tour-core.svg)](https://www.npmjs.com/package/ngx-ui-tour-core)
[![npm](https://img.shields.io/npm/v/ngx-ui-tour-core.svg)](https://www.npmjs.com/package/ngx-ui-tour-core)
[![npm](https://img.shields.io/npm/l/ngx-ui-tour-core.svg)](https://www.npmjs.com/package/ngx-ui-tour-core)

## Table of contents

- [Demo and documentation](#demo-and-documentation)
- [Compatibility](#compatibility)
- [Installation and Usage](#installation-and-usage)
- [FAQ](#faq)
- [TourService](#tourservice)
- [Step Configuration](#step-configuration)
- [Defaults](#defaults)
- [Hotkeys](#hotkeys)
- [Event Observables](#event-observables)
- [Custom template](#custom-template)
- [Styling Active Tour Anchor](#styling-active-tour-anchor)
- [Targeting Third Party Elements](#targeting-third-party-elements)
- [License](#license)

## Demo and documentation

Demo and documentation can be found at [hakimio.github.io/ngx-ui-tour](https://hakimio.github.io/ngx-ui-tour)

## Compatibility

### Material Design tour UI

| Angular | RxJS | ngx-ui-tour |
|---------|------|-------------|
| 21      | 7    | 16          |
| 20      | 7    | 15          |
| 19      | 7    | 14          |
| 18      | 7    | 13          |
| 17      | 7    | 12          |
| 16      | 7    | 11          |
| 15      | 7    | 10          |
| 14      | 6, 7 | 9           |
| 12-13   | 6, 7 | 8           |
| 9-12    | 6    | 7           |

### NG Bootstrap tour UI

| Angular | RxJS | ngx-ui-tour |
|---------|------|-------------|
| 21      | 7    | 18          |
| 20      | 7    | 17          |
| 19      | 7    | 16          |
| 18      | 7    | 15          |
| 17      | 7    | 14          |
| 16      | 7    | 13          |
| 15      | 7    | 12          |
| 14      | 6, 7 | 11          |
| 12-13   | 6, 7 | 10          |
| 9-12    | 6    | 9           |

### Ionic tour UI

| Angular | RxJS | Ionic | ngx-ui-tour |
|---------|------|-------|-------------|
| 21      | 7    | 8     | 8           |
| 20      | 7    | 8     | 7           |
| 19      | 7    | 8     | 6           |
| 18      | 7    | 8     | 5           |
| 18      | 7    | 7, 8  | 4           |
| 17      | 7    | 7, 8  | 3           |
| 16      | 7    | 6, 7  | 2           |
| 15      | 7    | 6, 7  | 1           |

### PrimeNG tour UI

| Angular | RxJS | PrimeNG | ngx-ui-tour |
|---------|------|---------|-------------|
| 21      | 7    | 21      | 3           |
| 20      | 7    | 20      | 2           |
| 19      | 7    | 19      | 1           |

### NG ZORRO tour UI

| Angular | NG ZORRO | ngx-ui-tour |
|---------|----------|-------------|
| 21      | 21       | 1           |

### Taiga UI tour UI

| Angular | RxJS | Taiga UI | ngx-ui-tour |
|---------|------|----------|-------------|
| 21      | 7    | 5        | 10          |
| 20      | 7    | 4        | 9           |
| 19      | 7    | 4        | 8           |
| 18      | 7    | 3        | 7           |
| 17      | 7    | 3        | 6           |
| 16      | 7    | 3        | 5           |
| 15      | 7    | 3        | 4           |
| 14      | 6, 7 | 3        | 3           |
| 12-13   | 6, 7 | 2        | 2           |
| 9-12    | 6    | 2        | 1           |

## Installation and Usage

- [Material Design UI](https://hakimio.github.io/ngx-ui-tour/md-menu/Setup)
- [Ionic UI](https://hakimio.github.io/ngx-ui-tour/ion-popover/Setup)
- [PrimeNG UI](https://hakimio.github.io/ngx-ui-tour/prime-ng/Setup)
- [NG ZORRO UI](https://hakimio.github.io/ngx-ui-tour/ng-zorro/Setup)
- [NG Bootstrap UI](https://hakimio.github.io/ngx-ui-tour/ng-bootstrap/Setup)
- [Taiga UI Dropdown UI](https://hakimio.github.io/ngx-ui-tour/tui-dropdown/Setup)
- [Taiga UI Hint UI](https://hakimio.github.io/ngx-ui-tour/tui-hint/Setup)
- [JavaScript Console UI](https://hakimio.github.io/ngx-ui-tour/console/Setup)

## FAQ

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/FAQ)

## Step Configuration

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#step-config)

## Defaults

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#defauls)

## TourService

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#tour-service)

## Event Observables

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/API#events)

## Hotkeys

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#hotkeys)

## Custom template

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#custom-template)

## Styling Active Tour Anchor

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#styling-active-anchor)

## Targeting third party elements

[Documentation page](https://hakimio.github.io/ngx-ui-tour/md-menu/Misc#targeting-third-party-elements)

## License

MIT