buttons-tree

Angular component library for rendering a hierarchical buttons grid (ideal for POS/category navigation) with:

• Recursive tree navigation
• Optional button images
• Press/hold interaction
• Swipe-right navigation to previous panel
• Swipe-left navigation forward to the previously visited panel
• Configurable row spacing

Preview

Hierarchy and panel behavior:

Swipe-right back navigation:

Installation

npm install buttons-tree

Module Setup

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonsTreeModule } from 'buttons-tree';

@NgModule({
	imports: [BrowserModule, ButtonsTreeModule],
})
export class AppModule {}

Basic Usage

<buttons-tree
	[buttonsTree]="buttonsTree"
	[isDisplayImage]="true"
	[storageRootPath]="storageRootPath"
	[buttonBackTitle]="'חזרה'"
></buttons-tree>

POS-style conditional render example:

<buttons-tree
	*ngIf="(search_text.value?.length ?? 0) === 0 && (_items?.length ?? 0) === 0"
	[buttonsTree]="buttonsTree"
	[isDisplayImage]="true"
	[storageRootPath]="storage_root_path"
	[buttonBackTitle]="'חזרה'"
></buttons-tree>

Inputs

| Input | Type | Default | Description | |---|---|---|---| | buttonsTree | Node[] \| undefined | undefined | Root nodes to render. | | isDisplayImage | boolean | false | Show image inside each button. | | maxColumns | number | 4 | Number of buttons per row. Minimum is 1. | | autoMaxColumns | boolean | true | Auto-fit columns by container width (never exceeds maxColumns). | | minButtonWidth | number | 120 | Minimum button width in px used for auto-fit column calculation. | | storageRootPath | string | "" | Base path to prepend to image paths from data. | | buttonBackTitle | string | "" | Back button label for child panels. | | rowGap | string | "10px" | Vertical spacing between rows (e.g. "6px", "0.75rem"). | | enableBackSwipe | boolean | true | Enables swipe-right back navigation. | | enableForwardSwipe | boolean | true | Enables swipe-left forward navigation to the previously visited panel. |

Row Spacing Customization

Set spacing directly from your app:

<buttons-tree
	[buttonsTree]="buttonsTree"
	[rowGap]="'14px'"
></buttons-tree>

Or use CSS variable override in host context:

buttons-tree {
	--buttons-tree-row-gap: 14px;
}

The button grid is responsive by default and adapts to available panel width on different screen resolutions.

Example: cap at 4 columns but auto-drop to 3/2/1 on narrower panels.

<buttons-tree
	[buttonsTree]="buttonsTree"
	[maxColumns]="4"
	[autoMaxColumns]="true"
	[minButtonWidth]="120"
></buttons-tree>

Swipe Behavior Configuration

Disable forward-swipe (keep only back-swipe and back button):

<buttons-tree
	[buttonsTree]="buttonsTree"
	[enableForwardSwipe]="false"
></buttons-tree>

Disable back-swipe while keeping forward-swipe enabled:

<buttons-tree
	[buttonsTree]="buttonsTree"
	[enableBackSwipe]="false"
	[enableForwardSwipe]="true"
></buttons-tree>

Data Shape

Minimal structure expected by the component:

interface Node {
	guid?: string;
	data: {
		name: string;
		imagePath?: string;
		// Other fields allowed
	};
	nodes?: Node[];
}

Publish (Maintainers)

ng build ButtonsTree
cd dist/buttons-tree
npm publish

Notes

• Long labels are clamped to 2 lines with ellipsis for symmetry.
• Child/parent panel transitions are handled by component logic.
• If your app needs stronger branding, override styles in your app shell while keeping library defaults as baseline.