ngx-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.

Info

In order to be compliant with the Angular 3rd Party Projects naming convention angular2-joyride has been renamed and moved to ngx-joyride

Demo

See the demo. Let's take a tour! 🌎

Install

npm install ngx-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:

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