Skip to content
MemberJunction

@memberjunction/ng-list-management

Angular components for the MemberJunction Lists feature: list-membership management, sharing, refresh-from-source preview, audience picking, tagging, and lightweight stats. Drop-in pieces that any MJ app can use; the components here own the UI shape, and @memberjunction/lists owns the underlying business logic.

Installation

Section titled “Installation”
Terminal window
npm install @memberjunction/ng-list-management

Module import

Section titled “Module import”
import { ListManagementModule } from '@memberjunction/ng-list-management';


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

All components below are exported via this single module.

Components

Section titled “Components”
SelectorComponentPurpose
mj-list-management-dialogListManagementDialogComponentDialog for adding/removing records to/from lists
mj-list-share-dialogListShareDialogComponentShare-with-users-or-roles dialog (audit-log + notification footer links)
mj-list-delta-confirmListDeltaConfirmComponentPreview-and-confirm dialog for any mutating list op (drop-guard UX)
mj-save-view-as-list-dialogSaveViewAsListDialogComponentMaterialize a User View into a new static List (with optional lineage + filter snapshot)
mj-list-invitationsListInvitationsComponentPer-list invitations management — Pending / Accepted / Expired / Revoked tabs + send form
mj-list-audit-logListAuditLogComponentPer-list audit-log viewer reading the generic MJ: Audit Logs table
mj-lists-shared-with-meListsSharedWithMeComponentBrowse-style grid of all lists shared with the current user
mj-list-statsListStatsComponentSide-panel usage stats (members, monthly growth, active shares, recent-activity feed)
mj-tag-chipsTagChipsComponentCompact tag chips for any entity record (read-only + editable variants)
mj-audience-source-pickerAudienceSourcePickerComponentThree-tab audience picker — List / View / Ad-hoc Filter — emits typed AudienceSource
mj-audience-source-summaryAudienceSourceSummaryComponentCompact friendly-name summary of a selected AudienceSource

Component reference

Section titled “Component reference”

mj-list-delta-confirm

Section titled “mj-list-delta-confirm”

The only UI path that emits a valid DeltaToken to apply a list mutation. Two visual states — safe (green) and drop-warning (red with a required acknowledgement checkbox).

<mj-list-delta-confirm
  [Visible]="confirmVisible && !!delta"
  [Delta]="delta"
  [TargetListName]="listName"
  [SourceLabel]="sourceName"
  (Confirm)="onConfirm($event)"
  (Cancel)="onCancel()">
</mj-list-delta-confirm>

(Confirm) emits the DeltaToken string; pass it back to GraphQLListsClient.ApplyListDelta({ Delta, ConfirmDrops }).

mj-save-view-as-list-dialog

Section titled “mj-save-view-as-list-dialog”

Materializes a User View into a new List. Surfaces the lineage options (one-time snapshot vs. remember source view) and the freeze-filter toggle (UseSnapshot).

<mj-save-view-as-list-dialog
  [Provider]="provider"
  [Visible]="dialogVisible"
  [ViewId]="viewId"
  [ViewName]="viewName"
  [RecordCount]="viewRowCount"
  (Save)="onSaveAsList($event)"
  (Cancel)="onCancel()">
</mj-save-view-as-list-dialog>

(Save) emits a SaveViewAsListResult — caller invokes GraphQLListsClient.MaterializeFromView(viewId, opts).

mj-list-invitations

Section titled “mj-list-invitations”

Full invitations management for one list. Drives the Invite / RevokeInvitation / “Resend” flows from ListSharing.

<mj-list-invitations
  [Provider]="provider"
  [ListID]="listId"
  [ListName]="listName">
</mj-list-invitations>

mj-list-audit-log

Section titled “mj-list-audit-log”

Per-list audit log viewer. Reads from MJ: Audit Logs filtered to the List entity + this list’s ID. Joins users + audit-log-types in a single batch query so the table renders names, not UUIDs.

<mj-list-audit-log
  [Provider]="provider"
  [ListID]="listId"
  [PageSize]="200">
</mj-list-audit-log>

mj-lists-shared-with-me

Section titled “mj-lists-shared-with-me”

Browse-style grid for lists shared with the current user. Click events bubble up via OpenList so the host app can route through its own navigation.

<mj-lists-shared-with-me
  [Provider]="provider"
  (OpenList)="onOpenList($event.ListID)">
</mj-lists-shared-with-me>

mj-list-stats

Section titled “mj-list-stats”

Compact side panel for a list detail view. Surfaces member count, this-month growth, active share count, time-since-last-activity, and a recent-activity feed pulled from the audit log.

<mj-list-stats [Provider]="provider" [ListID]="listId"></mj-list-stats>

mj-tag-chips

Section titled “mj-tag-chips”

Compact, reusable tag chips for any entity record. Backed by MJ: Tagged Items. Read-only by default; passing [Editable]="true" shows an inline autocomplete add field and per-chip remove buttons.

<!-- Read-only chips on a card -->
<mj-tag-chips
  [Provider]="provider"
  EntityName="MJ: Lists"
  [RecordID]="listId"
  [MaxDisplay]="3"
  (TagClicked)="onFilterByTag($event)">
</mj-tag-chips>


<!-- Editable chips on a detail view -->
<mj-tag-chips
  [Provider]="provider"
  EntityName="MJ: Lists"
  [RecordID]="listId"
  [Editable]="true"
  [MaxDisplay]="20">
</mj-tag-chips>

mj-audience-source-picker + mj-audience-source-summary

Section titled “mj-audience-source-picker + mj-audience-source-summary”

Reusable audience picker for Communications and any other audience-aware feature. Emits a typed AudienceSource discriminated union (same shape as ListSource from @memberjunction/lists).

<mj-audience-source-picker
  [Provider]="provider"
  [LockedEntityName]="entityName"
  [Source]="currentSource"
  (SourceChange)="audience = $event">
</mj-audience-source-picker>


<mj-audience-source-summary
  [Provider]="provider"
  [Source]="audience"
  [RecordCount]="resolvedCount">
</mj-audience-source-summary>

Three tabs: List (pick a saved MJ: List), View (pick a MJ: User View, marked “live”), Ad-hoc Filter (entity + free-form ExtraFilter).

Services

Section titled “Services”
ServicePurpose
ListManagementServiceAdd/remove/create list operations from the management dialog
ListSharingServiceDirect share writes from the share dialog (Phase 1 path; new code prefer the server-side ListSharing via GraphQLListsClient)

Companion packages

Section titled “Companion packages”

For the underlying business logic and the wire-format client:

Dependencies

Section titled “Dependencies”