yonia1 / ngx-guide

A free easy to use Angular library for creating and easy and highly customisable tour in your site

NgGuideWalkLibApp

Create a custimize guide to your website

Install: yarn:

 yarn add ng-guide-walk

npm:

 npm install ng-guide-walk --save

See Demo here

After install add the module NgGuideWalkLibModule:

import { NgGuideWalkLibModule } from 'ng-guide-walk';

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

Now add the following directive to the element you would like to set the tour to:

<h2
ngGuideStep="1"  ngGuideStepContent="this is step 1"
>Here are some links to help you start: </h2>

For Custom style:

 <div 
  class="tooltip"
  [ngGuideStepStyle]="customStyle"
  ngGuideStep="1" ngGuideStepContent="this is step 1" ngGuideStepLocation='bottom'>

In the Component just add the css rules you would like to use

   customStyle = {
    'background-color': 'red',
    'color' : 'green',
    'border-radius': '50%'
  };

Inject the guide service into your component and just trigger the guide when ever you want:

import { NgGuideWalkLibService } from 'ng-guide-walk';
constructor(private guideSerivce: NgGuideWalkLibService) {
    setTimeout(() => this.guideSerivce.startGuide(), 2000);
  }

And you are done!