@memberjunction/ng-tabstrip

A lightweight, zero-dependency Angular tab strip component for MemberJunction applications. Provides dynamic tab management with closeable tabs, scroll overflow handling, context menus, and programmatic tab control.

Installation

npm install @memberjunction/ng-tabstrip

Overview

The tab strip renders a row of tab headers with corresponding body panels. It handles overflow with horizontal scroll buttons, supports closeable tabs with cancelable close events, and provides a rich event system for tab lifecycle management. Unlike Kendo UI tabs, this component has no external dependencies beyond Angular.

flowchart TD
    subgraph TabStrip["MJTabStripComponent"]
        A["Tab Headers (scrollable)"]
        A --> B["MJTabComponent 1"]
        A --> C["MJTabComponent 2"]
        A --> D["MJTabComponent N"]
    end
    subgraph Bodies["Tab Bodies"]
        E["MJTabBodyComponent 1"]
        F["MJTabBodyComponent 2"]
        G["MJTabBodyComponent N"]
    end
    subgraph Events["Event System"]
        H["BeforeTabSelected (cancelable)"]
        I["TabSelected"]
        J["BeforeTabClosed (cancelable)"]
        K["TabClosed (with done callback)"]
        L["TabContextMenu"]
    end

    B --> E
    C --> F
    D --> G
    TabStrip --> Events

    style TabStrip fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Bodies fill:#2d8659,stroke:#1a5c3a,color:#fff
    style Events fill:#7c5295,stroke:#563a6b,color:#fff

Usage

Module Import

import { MJTabStripModule } from '@memberjunction/ng-tabstrip';

@NgModule({
  imports: [MJTabStripModule]
})
export class YourModule {}

Basic Usage

<mj-tabstrip
  [SelectedTabIndex]="selectedTab"
  (TabSelected)="onTabSelected($event)"
  (BeforeTabClosed)="onBeforeTabClosed($event)">

  <mj-tab [Name]="'overview'" [TabCloseable]="false">Overview</mj-tab>
  <mj-tab [Name]="'details'" [TabCloseable]="true">Details</mj-tab>
  <mj-tab [Name]="'settings'" [TabCloseable]="true">Settings</mj-tab>

  <mj-tab-body>
    <h2>Overview Content</h2>
  </mj-tab-body>
  <mj-tab-body>
    <h2>Details Content</h2>
  </mj-tab-body>
  <mj-tab-body>
    <h2>Settings Content</h2>
  </mj-tab-body>
</mj-tabstrip>

Components

| Component | Selector | Purpose | |-----------|----------|---------| | MJTabStripComponent | mj-tabstrip | Container managing tab selection and scroll | | MJTabComponent | mj-tab | Individual tab header | | MJTabBodyComponent | mj-tab-body | Content panel for a tab |

MJTabStripComponent

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | SelectedTabIndex | number | 0 | Index of the selected tab | | FillWidth | boolean | true | Fill container width | | FillHeight | boolean | true | Fill container height | | ScrollAmount | number | 150 | Pixels to scroll per click |

Outputs

| Event | Type | Description | |-------|------|-------------| | BeforeTabSelected | EventEmitter<TabCancelableEvent> | Before tab selection (cancelable) | | TabSelected | EventEmitter<TabEvent> | After tab selection | | BeforeTabClosed | EventEmitter<TabCancelableEvent> | Before tab close (cancelable) | | TabClosed | EventEmitter<TabClosedEvent> | After tab close (call done() when finished) | | TabContextMenu | EventEmitter<TabContextMenuEvent> | Tab right-click | | TabScrolled | EventEmitter<void> | Tab strip scrolled |

Methods

| Method | Returns | Description | |--------|---------|-------------| | SelectTabByName(name) | MJTabComponent \| undefined | Select a tab by name | | GetTabByName(name) | MJTabComponent \| undefined | Find a tab by name | | CloseTab(index) | Promise<void> | Close a tab programmatically | | scrollIntoView(index) | void | Scroll to make a tab visible | | RefreshTabs() | void | Refresh after dynamic changes |

MJTabComponent

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | Name | string | '' | Tab identifier | | ID | string \| number | -- | Custom identifier | | TabCloseable | boolean | false | Show close button | | Visible | boolean | true | Tab visibility |

Event Types

• TabEvent -- { index, tab, body }
• TabCancelableEvent -- Extends TabEvent with cancel: boolean
• TabClosedEvent -- Extends TabEvent with newTabIndex and done() callback
• TabContextMenuEvent -- Extends TabEvent with mouseEvent

Dependencies

• @angular/common / @angular/core
• @memberjunction/ng-container-directives -- Container directives