This package has been deprecated

Author message:

This library has been moved to ngx-joyride. angular2-joyride won't be maintained anymore, use ngx-joyride instead (https://www.npmjs.com/package/ngx-joyride)

angular2-joyride
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

@NgModule({
  declarations: [AppComponent],
  imports: [
   JoyrideModule,
   BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

#### 3. Inject the JoyrideService in your Component and start the Tour

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  constructor(private readonly joyrideService: JoyrideService) { }
 
  onClick() {
    this.joyrideService.startTour();
  }
}

#### 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

Package Sidebar

Install

npm i angular2-joyride

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

525 kB

Total Files

34

Last publish

Collaborators

  • nicola.tommasi