@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
Copy

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
Copy

Key Dependencies

Usage

Import the Module

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

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

Email Link

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

Web Link

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

Field/Record Link

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

Exported API

Build

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

License

ISC