TutorialLibrary

This library was generated with Angular CLI version 15.2.0.

Code scaffolding

Run ng generate component component-name --project tutorial-lib to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project tutorial-lib.

Note: Don't forget to add --project tutorial-lib or else it will be added to the default project in your angular.json file.

Build

Run ng build tutorial-lib to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build tutorial-lib, go to the dist folder cd dist/tutorial-lib and run npm publish.

Running unit tests

Run ng test tutorial-lib to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Tutorial config

export const tutorialConfig = [
  {
    text: '<b>1. Dummy Step:</b> This is a dummy step for demonstration purposes.',
    id: 'dummy-step-1',
    style: {
      heighlightArea: {
        offsetX: 1.1,
        offsetY: 1.3
      },
      arrowOrigin: {
        offset: 1.25
      },
      arrowTipOffset: 0.01
    }
  },
  {
    text: '<b>2. Dummy Step:</b> This is another dummy step for demonstration purposes.',
    id: 'dummy-step-2',
  },
  {
    text: '<b>3. Dummy Step:</b> Yet another dummy step for demonstration purposes.',
    id: 'dummy-step-3',
  },
  {
    text: '<b>4. Dummy Step:</b> This is a dummy step for demonstration purposes.',
    id: 'dummy-step-4',
  },
  {
    text: '<b>5. Dummy Step:</b> This is a dummy step for demonstration purposes.',
    id: 'dummy-step-5',
    buttonText: 'Complete Tutorial',
    clickOperation: 'closeTutorial',
  },
];

Here id is the html element id (e.g <div id="dummy-step-1"></div>) which needs to be highlighted. Text is the information which needs to be shown as an instruction for a particular step. This can be a html as well.

We can provide several offset values to adjust the view. To increase or decrease the width and height of the highlighted area of a section, we can use offsetX and offsetY respectively. Additionally, the origin of the arrow can be adjusted with the arrowOrigin offset value. Finally, we can adjust the tip of the arrow using the arrowTipOffset. All these values will be in percentage relative to the section.

if buttonText is given then CTA will be shown in UI and need to declare the function also in clickOperation field and that function should be defined in the calling component.

To show the tutorial

  <lib-tutorial
    *ngIf="showTutorial"
    #tutorialComponent
    [steps]="templateTutorialArr"
    (operationTriggered)="handleTutorialOperation($event)"
  ></lib-tutorial>

handle the CTA defined in the tutorial config using the handleTutorialOperation function

  handleTutorialOperation(operation: string) {
    if (typeof this[operation] === 'function') {
      this[operation]();
    } else if(operation === 'skipTutorial') {
      this.closeTutorial();
    }
  }

To close the tutorial

  public closeTutorial() {
    this.showTutorial = false;
    if (this.tutorialComponent) {
      this.tutorialComponent.closeButton();
    }
  }