bdc-walkthrough

Welcome to bdc-walkthrough!

The walk-through library is composed of these 3 parts:

  1. BdcWalkService - a service used to manage and store the completed tasks. These are stored in the LocalStorage of the browser.
    Each task is either completed (true), uncompleted (false), or completed with a value.
  2. <bdc-walk-popup> - a component used to display popups automatically when a set of tasks match the criteria. Each popup has a unique name, which is used to identify its task.
    If the popup is closed by the user, its task is automatically marked as completed and it won't show up again.
  3. <bdc-walk-dialog> (this dialog) - a component used to display dialogs automatically when a set of tasks match the criteria.

Here is an example of a walk-through popup:

<bdc-walk-popup #taskDeleteApp name="taskDeleteApp"
  [mustCompleted]="{{"{taskCreateApp: true}"}}">
  Click the button to delete the App
</bdc-walk-popup>

It can then be attached to an element or a component using the hashtag reference:

<button [bdcWalkTriggerFor]="taskDeleteApp" (click)="delete()">
  Delete
</button>

We're now going to show you some example usages of the walk-through library. Choose an example from the navigation bar to start.