Angular Generic Packages
Reusable Angular components and services shared across MemberJunction applications. These 41 packages provide common UI patterns — chat interfaces, data grids, dashboards, file management, and more — while integrating with MemberJunction’s entity system, metadata, and permissions.
Encapsulation Rule: Generic components MUST NOT import
Router,ActivatedRoute, or any@angular/routertypes. All external state must flow through@Input()/@Output()contracts. See CLAUDE.md for details.
Packages
Section titled “Packages”Core & Base Types
Section titled “Core & Base Types”Foundation packages that other Generic packages depend on.
| Package | npm | Description |
|---|---|---|
| base-types | @memberjunction/ng-base-types | Simple types that are used across many generic Angular UI components for coordination |
| shared | @memberjunction/ng-shared-generic | Utility services and reusable elements used in any Angular application |
| container-directives | @memberjunction/ng-container-directives | Fill Container for auto-resizing and plain container directives for element identification/binding |
| Testing | @memberjunction/ng-testing | Testing components and utilities for Angular applications |
AI & Chat
Section titled “AI & Chat”Components for AI interactions, chat interfaces, and conversation management.
| Package | npm | Description |
|---|---|---|
| chat | @memberjunction/ng-chat | Reusable chat component for AI or peer-to-peer chat applications |
| conversations | @memberjunction/ng-conversations | Conversation, collection, and artifact management components |
| agents | @memberjunction/ng-agents | Reusable components for AI Agent management including permissions panel, dialog, and slideover |
| ai-test-harness | @memberjunction/ng-ai-test-harness | Reusable component for testing AI agents and prompts with beautiful UX |
| artifacts | @memberjunction/ng-artifacts | Artifact viewer plugin system for rendering different artifact types (JSON, Code, Markdown, HTML, SVG, Components) |
Entity & Data
Section titled “Entity & Data”Components for viewing, editing, and navigating entity data.
| Package | npm | Description |
|---|---|---|
| entity-viewer | @memberjunction/ng-entity-viewer | Components for viewing entity data in multiple formats (grid, cards) with filtering, selection, and shared data management |
| entity-communication | @memberjunction/ng-entity-communications | Components to allow a user to select templates, preview messages, and send them |
| entity-relationship-diagram | @memberjunction/ng-entity-relationship-diagram | Entity Relationship Diagram (ERD) component for visualizing entity relationships using D3.js force-directed graphs |
| data-context | @memberjunction/ng-data-context | Component and pop-up window to display and edit the contents of a data context |
| deep-diff | @memberjunction/ng-deep-diff | Component to display the differences between two objects, using the non-visual functionality from @memberjunction/global |
| record-selector | @memberjunction/ng-record-selector | Components to allow a user to select/deselect items from a possible set |
| find-record | @memberjunction/ng-find-record | Component to allow a user to find a single record in any entity |
| join-grid | @memberjunction/ng-join-grid | Grid component for displaying/editing the relationship between two entities (e.g., Users + Roles in a single grid) |
Actions & Workflows
Section titled “Actions & Workflows”Components for action execution, workflow editing, and task management.
| Package | npm | Description |
|---|---|---|
| actions | @memberjunction/ng-actions | Reusable components for testing and running actions with no Kendo dependencies |
| action-gallery | @memberjunction/ng-action-gallery | Filterable gallery component for browsing and selecting actions |
| flow-editor | @memberjunction/ng-flow-editor | Generic visual flow editor component powered by Foblex Flow, with an agent-specific Flow Agent Editor |
| tasks | @memberjunction/ng-tasks | Components for task visualization and management with Gantt chart support |
Query & Reporting
Section titled “Query & Reporting”Components for building queries, viewing results, and filtering data.
| Package | npm | Description |
|---|---|---|
| query-viewer | @memberjunction/ng-query-viewer | Components for viewing and executing stored queries with parameter input, interactive results grid, and entity linking |
| filter-builder | @memberjunction/ng-filter-builder | Modern, intuitive filter builder for creating complex boolean filter expressions with portable JSON format |
Dashboard & Layout
Section titled “Dashboard & Layout”Components for dashboards, navigation, content rendering, and notifications.
| Package | npm | Description |
|---|---|---|
| dashboard-viewer | @memberjunction/ng-dashboard-viewer | Components for metadata-driven dashboards with Golden Layout panels, supporting views, queries, artifacts, and custom content |
| tab-strip | @memberjunction/ng-tabstrip | Simple tab strip component used in the MJ Explorer app and reusable anywhere else |
| timeline | @memberjunction/ng-timeline | Responsive timeline component; works with MemberJunction entities or plain JavaScript objects with no external dependencies |
| trees | @memberjunction/ng-trees | Tree and tree-dropdown components for hierarchical entity selection |
| markdown | @memberjunction/ng-markdown | Lightweight markdown component with Prism.js highlighting, Mermaid diagrams, and extensible features |
| notifications | @memberjunction/ng-notifications | Simple library for displaying user notifications |
Credentials & Permissions
Section titled “Credentials & Permissions”Components for managing credentials and resource access control.
| Package | npm | Description |
|---|---|---|
| credentials | @memberjunction/ng-credentials | Components for credential management — panels and dialogs for creating and editing credentials |
| resource-permissions | @memberjunction/ng-resource-permissions | Generic components for displaying/editing permissions for a resource |
UI Utilities
Section titled “UI Utilities”General-purpose UI components, services, and helpers.
| Package | npm | Description |
|---|---|---|
| generic-dialog | @memberjunction/ng-generic-dialog | Component for a generic dialog |
| code-editor | @memberjunction/ng-code-editor | Angular code editor component |
| file-storage | @memberjunction/ng-file-storage | Components for managing files and related operations |
| export-service | @memberjunction/ng-export-service | Export service and dialog for exporting data to Excel, CSV, and JSON |
| list-management | @memberjunction/ng-list-management | Components for managing entity list membership with responsive UI |
| react | @memberjunction/ng-react | Angular components for hosting React components in MemberJunction applications |
| user-avatar | @memberjunction/ng-user-avatar | User Avatar Service — manages user avatar synchronization from auth providers and avatar operations |
| versions | @memberjunction/ng-versions | Version History Components — label creation, detail viewing, and slide panel |