@memberjunction/ng-entity-viewer

Angular components for viewing MemberJunction entity data in multiple formats -- grid, card, and timeline views -- with filtering, selection, toolbar actions, and a comprehensive Before/After cancelable event system.

Overview

The @memberjunction/ng-entity-viewer package provides a suite of data presentation components built on AG Grid. The primary component, EntityDataGridComponent, offers infinite scroll, configurable toolbars with custom buttons, server-side sorting, grid state persistence, and a rich event system where "before" events can be canceled. The EntityViewerComponent wraps the grid alongside card and timeline views with a view-mode toggle.

flowchart TD
    subgraph Composite["EntityViewerComponent"]
        TOGGLE[View Mode Toggle] --> GRID[Grid View]
        TOGGLE --> CARDS[Card View]
        TOGGLE --> TIMELINE[Timeline View]
    end

    subgraph Grid["EntityDataGridComponent"]
        TB[Configurable Toolbar] --> AG[AG Grid]
        AG --> INF[Infinite Scroll]
        AG --> SEL[Selection Modes]
        AG --> STATE[State Persistence]
        AG --> EVENTS[Before/After Events]
    end

    subgraph Data["Data Sources"]
        RV[RunView Params] --> Grid
        PRE[Pre-loaded Data] --> Grid
        ENT[Entity Name + Filter] --> Grid
    end

    GRID --> Grid

    style Composite fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Grid fill:#7c5295,stroke:#563a6b,color:#fff
    style Data fill:#2d8659,stroke:#1a5c3a,color:#fff
Copy

Installation

npm install @memberjunction/ng-entity-viewer ag-grid-angular ag-grid-community
Copy

Usage

Import the Module

import { EntityViewerModule } from '@memberjunction/ng-entity-viewer';

@NgModule({
  imports: [EntityViewerModule]
})
export class MyModule { }
Copy

Composite Viewer

<mj-entity-viewer
  [entity]="selectedEntity"
  [viewEntity]="myUserView"
  [showGridToolbar]="true"
  [gridToolbarConfig]="toolbarConfig"
  [gridSelectionMode]="'multiple'"
  (recordSelected)="onRecordSelected($event)"
  (recordOpened)="onRecordOpened($event)"
  (addRequested)="onAddNew()"
  (exportRequested)="onExport($event)">
</mj-entity-viewer>
Copy

Standalone Data Grid

<mj-entity-data-grid
  [entityName]="'Contacts'"
  [extraFilter]="'Status = \'Active\''"
  [showToolbar]="true"
  [toolbarConfig]="myToolbarConfig"
  [selectionMode]="'multiple'"
  [PaginationMode]="'infinite'"
  [PageSize]="100"
  (afterRowClick)="onRowClick($event)"
  (afterRowDoubleClick)="onRowDoubleClick($event)"
  (newButtonClick)="onAddNew()"
  (exportButtonClick)="onExport()">
</mj-entity-data-grid>
Copy

Cancelable Events

onBeforeRowSelect(event: BeforeRowSelectEventArgs) {
  // Prevent selecting locked records
  if (event.row.Get('Status') === 'Locked') {
    event.cancel = true;
    event.cancelReason = 'Cannot select locked records';
  }
}
Copy

API Reference

EntityDataGridComponent (mj-entity-data-grid)

AG Grid-based data grid with rich event system and configurable toolbar.

Data Source Inputs

Pagination Inputs

Display Inputs

Before/After Events

The grid uses a cancelable event pattern. Before events can be canceled by setting event.cancel = true.

Row Selection Events:

Row Click Events:

Data Events:

Sorting/Column Events:

Toolbar Button Events:

GridToolbarConfig

Configure toolbar buttons and behavior:

const toolbarConfig: GridToolbarConfig = {
  showSearch: true,
  searchPlaceholder: 'Search records...',
  searchDebounce: 300,
  showRefresh: true,
  showAdd: true,
  showDelete: true,
  showExport: true,
  showColumnChooser: true,
  showFilterToggle: false,
  exportFormats: ['excel', 'csv', 'json'],
  showRowCount: true,
  showSelectionCount: true,
  position: 'top',
  customButtons: [
    {
      id: 'myButton',
      text: 'My Action',
      icon: 'fa-solid fa-star',
      tooltip: 'Do something custom',
      position: 'right',
      onClick: () => console.log('Clicked!')
    }
  ]
};
Copy

EntityViewerComponent (mj-entity-viewer)

Composite component combining grid, cards, and timeline views.

Inputs

Outputs

RecycleBinComponent (mj-recycle-bin) and RecycleBinChipComponent (mj-recycle-bin-chip)

Slide-in panel that lists hard-deleted records for a single entity and lets a user with Delete permission re-create any of them from its historical RecordChange snapshot. The accompanying chip component is a tiny composite that renders a count-badge button and hosts the panel — drop it into any toolbar in three lines.

When to use

The chip is already embedded in EntityViewerComponent and EntityDataGridComponent — both expose a [ShowRecycleBin] input (default true) that you can flip off if you don't want the chip. Use the standalone components only when building a custom entity viewer.

Permission model

The chip and panel are gated on entity.UserPermissions.CanDelete. Rationale: there is no native "undelete" permission in MemberJunction, but if a user has the higher-trust permission to delete records of an entity, restoring deleted ones is well within scope. The actual re-create action additionally requires CanCreate; without it the Restore button on each card disables with a tooltip.

The chip auto-hides when:

• EntityName is null/empty
• The entity has TrackRecordChanges = false
• The user lacks CanDelete permission
• The deleted-record count is zero

Soft vs hard deletes

This component only surfaces hard-deleted records. Soft-deletes (IsDeleted flags, Status='Inactive', etc.) leave the record visible in normal entity views, so the standard Record Changes panel + restore preview already handles them — no Recycle Bin needed.

Cancelable Before/After events

Every meaningful action emits a paired before* / after* event. The before* event carries cancel: boolean so consumers can intercept — useful for custom approval workflows, audit logging, or to take over the actual restore execution.

onBeforeRecordRestore(e: BeforeRecordRestoreEventArgs) {
  if (!hasComplianceApproval(e.entry)) {
    e.cancel = true;
    e.cancelReason = 'Awaiting compliance approval';
  }
}
Copy

RecycleBinChipComponent Inputs

RecycleBinChipComponent / RecycleBinComponent Outputs

RecycleBinComponent Inputs (when used directly)

Embedded chip control

EntityViewerComponent and EntityDataGridComponent both expose:

<!-- Composite viewer with the chip turned off -->
<mj-entity-viewer
  [entity]="selectedEntity"
  [ShowRecycleBin]="false">
</mj-entity-viewer>

<!-- Standalone data grid with explicit chip event handling -->
<mj-entity-data-grid
  [entityName]="'Customers'"
  [ShowRecycleBin]="true">
</mj-entity-data-grid>
Copy

EntityCardsComponent (mj-entity-cards)

Card-based view with auto-generated layout.

<mj-entity-cards
  [entity]="selectedEntity"
  [records]="records"
  [filterText]="searchFilter"
  (recordSelected)="onSelected($event)"
  (recordOpened)="onOpened($event)">
</mj-entity-cards>
Copy

PillComponent (mj-pill)

Semantic color pill for categorical values. Colors are auto-detected based on value:

<mj-pill [value]="record.Status"></mj-pill>
Copy

Advanced Usage

Infinite Scroll Pagination

<mj-entity-data-grid
  [entityName]="'Contacts'"
  [PaginationMode]="'infinite'"
  [PageSize]="100"
  [CacheBlockSize]="100"
  [MaxBlocksInCache]="10">
</mj-entity-data-grid>
Copy

State Persistence with User Views

<mj-entity-data-grid
  [Params]="{ ViewID: myUserView.ID }"
  [AutoPersistState]="true"
  [StatePersistDebounce]="5000">
</mj-entity-data-grid>
Copy

Type Exports

// Types
import {
  GridToolbarConfig,
  GridToolbarButton,
  GridSelectionMode,
  GridColumnConfig,
  ViewGridStateConfig,
  DataGridSortState,
  RecordSelectedEvent,
  RecordOpenedEvent
} from '@memberjunction/ng-entity-viewer';

// Event Args
import {
  BeforeRowSelectEventArgs,
  AfterRowSelectEventArgs,
  BeforeRowClickEventArgs,
  AfterRowClickEventArgs,
  BeforeDataLoadEventArgs,
  AfterDataLoadEventArgs,
  AfterSortEventArgs
} from '@memberjunction/ng-entity-viewer';

// Recycle Bin
import {
  RecycleBinComponent,
  RecycleBinChipComponent,
  RecycleBinEntry,
  BeforeRecycleBinOpenEventArgs,
  AfterRecycleBinOpenEventArgs,
  BeforeRecordRestoreEventArgs,
  AfterRecordRestoreEventArgs,
  BeforeRestoreCommitEventArgs,
  AfterRestoreCommitEventArgs
} from '@memberjunction/ng-entity-viewer';
Copy

Dependencies

Runtime Dependencies

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x
• @angular/animations ^21.x
• ag-grid-angular ^35.x
• ag-grid-community ^35.x

Build

cd packages/Angular/Generic/entity-viewer
npm run build
Copy

License

ISC