Angular 2 Joyride
An Angular Tour (Joyride) library built entirely in Angular, without using any heavy external dependencies like Bootstrap or JQuery. From now on you can easily guide your users through your site showing them all the sections and features.
Demo
See the demo. Let's take a tour! 🌎
Install
npm install angular2-joyride
Usage
#### 1. Mark your HTML elements with the joyrideStep
directive
h1 joyrideStep title="Page Title" text="Main title!" stepNumber="2"Text</h1>
#### 2. Import the JoyrideModule
in your AppModule
#### 3. Inject the JoyrideService
in your Component and start the Tour
#### 4. En-joy 😉
Directive Inputs
You can use the joyrideStep
directive with these inputs:
@Input | Required | Purpose | Values |
---|---|---|---|
stepNumber | Yes | The order in which the step should appear during the tour. | 1, ..., n |
stepPosition | No | The position in which the step will be drawn. | 'top', 'bottom' |
title | No | The step title. | string |
text | No | The step text content. | string |
Next features
- Adding 'right', 'left', 'fullPage' stepPosition values.
- More options for the tour (like changing the theme color, the step template and the step behaviour, ... )
- Allow you to use your custom Angular component inside the step.
- Feel free to ask or share your ideas!
Licence
MIT