@memberjunction/ng-link-directives

Angular directives for transforming elements into clickable email, web, or entity record links. Used throughout MemberJunction forms to make field values interactive.

Overview

This package provides three directives that wrap elements in anchor tags based on the type of data they represent. A BaseLink abstract class handles the shared DOM manipulation logic. These directives are used automatically by MemberJunction’s form system to make email addresses, URLs, and foreign key values clickable.

graph TD
    BL["BaseLink\n(Abstract)"] --> EL["EmailLinkDirective\n[mjEmailLink]"]
    BL --> WL["WebLinkDirective\n[mjWebLink]"]
    BL --> FL["FieldLinkDirective\n[mjFieldLink]"]

    EL --> MA["mailto: link"]
    WL --> HA["http(s): link"]
    FL --> RN["Router navigation\n(entity record)"]

    style BL fill:#7c5295,stroke:#563a6b,color:#fff
    style EL fill:#2d6a9f,stroke:#1a4971,color:#fff
    style WL fill:#2d6a9f,stroke:#1a4971,color:#fff
    style FL fill:#2d6a9f,stroke:#1a4971,color:#fff
    style MA fill:#2d8659,stroke:#1a5c3a,color:#fff
    style HA fill:#2d8659,stroke:#1a5c3a,color:#fff
    style RN fill:#2d8659,stroke:#1a5c3a,color:#fff

Features

• Email links: Wraps text in a mailto: anchor tag
• Web links: Wraps text in an http(s): anchor tag (opens in new tab)
• Field/Record links: Wraps entity foreign key values as router links to navigate to the referenced record
• Automatic styling: Adds link-text CSS class with consistent font sizing
• Lightweight: Minimal DOM manipulation using Angular Renderer2

Installation

npm install @memberjunction/ng-link-directives

Key Dependencies

Dependency	Purpose
@memberjunction/core	EntityField metadata
@memberjunction/ng-shared	SharedService, navigation
@angular/router	Router for record navigation

Usage

Import the Module

import { LinkDirectivesModule } from '@memberjunction/ng-link-directives';

@NgModule({
  imports: [LinkDirectivesModule]
})
export class AppModule {}

Email Link

<span [mjEmailLink]="emailField">user@example.com</span>

Web Link

<span [mjWebLink]="urlField">https://example.com</span>

Field/Record Link

<span [mjFieldLink]="foreignKeyField" [record]="entityRecord">Related Record</span>

Exported API

Export	Type	Description
LinkDirectivesModule	NgModule	Module with all directive declarations
BaseLink	Abstract Class	Shared link creation logic
EmailLinkDirective	Directive	[mjEmailLink] - creates mailto links
WebLinkDirective	Directive	[mjWebLink] - creates web links
FieldLinkDirective	Directive	[mjFieldLink] - creates record navigation links

Build

cd packages/Angular/Explorer/link-directives && npm run build

License

ISC