The walk-through library is composed of these 3 parts:
-
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.
-
<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.
-
<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.