Material walk-through library is the angular material library for displaying pop-ups and informative dialogs boxes using a declarative method.

Basic requirements

• This library is compatible with Angular / Material 8.0 and later.
• Please install bdc-walkthrough version according to this table:

BdcWalkService

A service used to manage and store completed tasks. It is stored in the browser’s LocalStorage.

Each task is either completed (true), incomplete (false), or completed with a value (that is, a primitive or an object).

When the status of a task changes, all popups and dialog boxes on the page are re-evaluated to appear or disappear according to their [mustCompleted] logic.

<bdc-walk-popup>

A component used to automatically display popups when a set of tasks matches [mustCompleted] criteria.

Each popup window has a unique name that is used to identify its task.

If the user closes the popup, their task will automatically be marked as completed and will not appear again.

Must Read: Lightweight JavaScript Notification Message Box Library Plugin

How to make use of it:

Installing Angular Material:

ng add @angular/material

bdc-walkthrough install:

npm install bdc-walkthrough

Import BdcWalkModule to app.module.ts

export class AppComponent implements OnInit {

  constructor(private bdcWalkService: BdcWalkService) {}

  ngOnInit() {
    // make sure to unsubscribe on ngDestroy
    this.bdcWalkService.changes.subscribe(() => {
        // get the value of a task
        const taskCompleted = this.bdcWalkService.getTaskCompleted('taskCreateApp');
    });
  }

  submit(appForm) {
    // set the value of a task
    const app = DB.createApp(appForm);
    this.bdcWalkService.setTaskCompleted('taskCreateApp', {id: app.id, name: app.name});
  }

  reset() {
    // reset all tasks
    this.bdcWalkService.reset();
  }
}

Popup visualization options

There are some input properties that let you customize the popup visualization:

Must Read: A Native JavaScript Wrapper for Simple Bootstrap 5 Modals | Modbox

• header set the title of the popup.
• xPosition set either the popup is positioned before (default) or after the triggered element.
• yPosition set either the popup is positioned below (default) or above the triggered element.
• horizontal set either the popup is positioned horizontally or vertically (default).
• arrow set either an arrow is displayed (default) or not.
• offsetX set an offset on the x-axis relative to the trigger element.
• offsetY set an offset on the y-axis relative to the trigger element.
• alignCenter set either to align the popup’s arrow to the center of the element. Default (undefined) align center to small elements only.
• showCloseButton set either to display the popup close button (default: true).
• showButton set either to display the “Got it” button on a popup (default: false).
• buttonText set the text on the “Got it” button (default: Got it).
• sideNoteText set the text for the side note near the button.
• class set a css class to apply to the popup.

See Also –

(es6) Vanilla Javascript Modal Web Component | magnit-modal
A jQuery Plugin To Create A Timed Modal Dialog
Responsive And Fully Customizable Dialog Window / Popup | SuperModal

See Demo And Download

Official Website(Broadcom): Click Here

This superior jQuery/javascript plugin is developed by Broadcom. For extra Advanced Usage, please go to the official website.