NgAppHelp

NgAppHelp is simple angular 2+ library the provides a great way to provide your users in-app help. The user experience is to provide help button that when pressed, highlights all elements that have attached help. The user can then hover over those 'help enabled' elements and see detailed help as a modal.

Install

npm install @plummer-libs/ng-app-help

Usage

Directive: ngAppHelpEnablerButton

Attach this attribute directive to the button that should enable the help system.

Attributes:

Events

Example Usage:

<button ngAppHelpEnablerButton [helpTemplate]='firstTime'>Enable Help Button</button>
<ng-template #firstTime>
  <div>This is some first time help.</div>
  <div>  Normally I'd put instructions here on how the help system works.</div>
</ng-template>

Directive: ngAppHelpEnabled

Attach this directive to any HTML element you want to attach help.

Attributes:

Events

Example Usage:

<button ngAppHelpEnabled 
        [highlightClass]="'my_highlight'"
        [helpTemplate]="myElementHelpTemplate"
        (click)="doSomething()">Test Button</button>
<ng-template #myElementHelpTemplate>
  <div>This is a template that would show help on how to use this element</div>
</ng-template>

Service: NgAppHelpService

Used to communicate between the directives. But can be used directly to get the current state, or trigger help enable.

Api

Example:

<button ngAppHelpEnablerButton [helpTemplate]='firstTime'>Enable Button</button>
<ng-template #firstTime>
  <div>This is some first time help.  Normally I'd put instructions here on how the help system works.</div>
</ng-template>


<button ngAppHelpEnabled
        [highlightClass]="'my_highlight'"
        [helpTemplate]="myElementHelpTemplate"
        (click)="doSomething()">Test Button</button>
<ng-template #myElementHelpTemplate>
  <div>This is a template that would show help on how to use this element</div>
</ng-template>

<div ngAppHelpEnabled
     [highlightClass]="'my_highlight'"
     [helpTemplate]="myOtherHelpTemplate">
  Here's some text that for some reason requires detailed help.
</div>
<ng-template #myOtherHelpTemplate>
  <div>It's text.  Just read it.  Help complete.</div>
</ng-template>