Angular Material Walk-through Library for Displaying Popups and Dialogs

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:
1.2.x14.0 – 15.014.0 – 15.0 – 13.08.0 – 13.0


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.


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:, name:});

  reset() {
    // reset all tasks

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.

Related Posts


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

Leave a Reply

Your email address will not be published. Required fields are marked *