@memberjunction/ng-record-tags

Angular component for displaying and managing tags on MemberJunction entity records. Shows a slide-in panel with weighted tag pills and supports tag removal.

Installation

npm install @memberjunction/ng-record-tags

Usage

Import RecordTagsModule in your feature module:

import { RecordTagsModule } from '@memberjunction/ng-record-tags';

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

Then use the component in your template:

<mj-record-tags
    [Record]="SelectedRecord"
    (PanelClosed)="OnTagsPanelClosed()">
</mj-record-tags>

Component API

Selector

mj-record-tags

Inputs

| Input | Type | Description | |-------|------|-------------| | Record | BaseEntity | Required. The entity record whose tags should be displayed. The component reads Record.EntityInfo.ID and Record.PrimaryKey.Values() to query the MJ: Tagged Items entity. |

Outputs

| Output | Type | Description | |--------|------|-------------| | PanelClosed | EventEmitter<void> | Emitted when the user closes the slide panel. Use this to toggle visibility in the parent component. |

Public Properties

| Property | Type | Description | |----------|------|-------------| | TaggedItems | MJTaggedItemEntity[] | The loaded tagged items, sorted by weight descending | | IsLoading | boolean | True while tags are being loaded from the server |

Public Methods

| Method | Description | |--------|-------------| | LoadTags() | Reloads tags from the database. Called automatically on init. | | RemoveTag(taggedItem) | Deletes a tagged item and removes it from the local list. | | GetTagOpacity(weight) | Returns opacity (0.3--1.0) for visual weight indication. | | GetTagFontSize(weight) | Returns font size string (0.85rem--1.15rem) for weight indication. |

Tag Loading

On initialization, the component queries MJ: Tagged Items filtered by the record's EntityID and RecordID. Results are loaded as entity objects (enabling the Delete() method for removal) and sorted by weight descending so the most relevant tags appear first.

Weight Visualization

Tags are rendered as pills with two visual weight indicators:

1. Opacity -- higher-weighted tags are more opaque (range 0.3--1.0 via GetTagOpacity()).
2. Font size -- higher-weighted tags are slightly larger (range 0.85rem--1.15rem via GetTagFontSize()).

Tags with a weight less than 1.0 display a percentage badge (e.g., "85%") in a muted style.

Tag Removal

Each tag pill includes a remove button (X icon). Clicking it calls taggedItem.Delete() on the entity object and removes it from the local TaggedItems array. The deletion is immediate and permanent.

Empty State

When no tags exist for a record, the component displays an empty state with a tags icon and a message explaining that tags are applied through the Knowledge Hub autotagging pipeline.

Panel Behavior

The component renders inside an mj-slide-panel with the following configuration:

• Mode: slide (slides in from the side)
• Title: "Tags"
• Resizable: Yes
• MinWidthPx: 350
• MaxWidthRatio: 0.5 (max 50% of viewport width)

When the panel is closed, the PanelClosed event is emitted for the parent to handle visibility toggling.

Design Token Compliance

All colors use MJ semantic design tokens. No hardcoded hex values appear in the component styles. Key tokens used:

| Token | Usage | |-------|-------| | --mj-text-primary | Tag text | | --mj-text-secondary | Tag count label | | --mj-text-muted | Weight badge, hint text, empty state icon, remove button | | --mj-brand-primary | Tag pill background tint and border tint (via color-mix()) | | --mj-bg-surface | Tag pill background base | | --mj-bg-surface-sunken | Weight badge background | | --mj-border-default | Tag pill border base (mixed with brand) | | --mj-status-error | Remove button hover state |

Module Dependencies

RecordTagsModule imports:

• CommonModule (Angular)
• MjSlidePanelComponent (@memberjunction/ng-ui-components) -- provides mj-slide-panel
• SharedGenericModule (@memberjunction/ng-shared-generic) -- provides mj-loading