angular-walkthrough

Walkthrough

This Angular model is inspired in part by ng-walkthrough for AngularJS.

Installation

npm install angular-walkthrough

Requirements

• Angular 4.0.0 and more
• Angular/cdk 2.0.0-beta.12

Demo

See a demo.

Usage

Directive Attributes

All attributes are optional.

• id: HTML id.
• focusElementSelector: CSS selector for focus a HTML element. If the selector detect more that one, the only the first will be chosen.
• focusHighlightAnimation: true for show highlight animation on the focus element. By defaut false.
• focusBackdrop: true for show a dark backdrop around the focus element. By defaut false.
• focusGlow: true for show a glow on the focus element. By defaut false.
• focusAction: Add an action click on the highlight zone.
• typeSelector: Type of selection. Two modes possible: element (one unique HMLT element), zone (a zone with contains the first and last element). By defaut : element.
• radius: apply a “borderRadius” on highlight zone. If number the value as change in percent. If auto use the focused element borderRadius. If it's a simple string, use it without changes. By defaut, no radius.
• previousStep: add a ling to go to the previous ng-walkthrough.
• nextStep: add a ling to go to the next ng-walkthrough.
• texts: change texts. It's a overlay of WalkthroughText.
• closeButton: true for show the button. By defaut false.
• closeAnywhere: click anywhere to close. By defaut true.
• showArrow: true for show the arrow. By defaut false.
• arrowColor: change the arrow color. By defaut #FFF.
• finishStep: true for show a link to exit. By defaut false.
• contentTemplate: add a ng-template with your description.
• justifyContent: align the contentTemplate. Possible values: left, center or right. By defaut : left
• contentStyle: background style for content container. Possible values: none, darken. By defaut : darken

Change texts

It's possible to change all texts. With the texts directive attribute.

WalkthroughText {
    previous = 'Previous';
    next     = 'Next';
    close    = 'Close';
}

Example

Highlighting #selectorId element with example text in ng-template.

<ng-walkthrough
    id="wt-test"
    focusElementSelector="#selectorId"
    hasBackdrop="true"
    [contentTemplate]="template"
    closeButton="true">
    <ng-template #template>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </p>
    </ng-template>
</ng-walkthrough>

License

Like Angular, this module is released under the permissive MIT license. Your contributions are always welcome.