@crsx/linkify

A lightweight Angular standalone pipe that detects and converts plain text URLs and Emails into clickable HTML links.

Install

npm install @crsx/linkify

Usage

Import LinkifyPipe in your component:

import { Component } from '@angular/core';
import { LinkifyPipe } from '@crsx/linkify';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LinkifyPipe],
  template: `<span [innerHTML]="text | linkify"></span>`
})
export class AppComponent {
  text = 'Visit https://angular.dev or contact [email protected]';
}

Parameters

text | linkify : openInNewTab : truncateLength

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | openInNewTab | boolean | true | Opens links in a new tab (target="_blank"). | | truncateLength | number | - | Optional. Truncates long links with ellipsis (...). |

Example

<!-- Open in new tab (default), truncate at 30 chars -->
<span [innerHTML]="text | linkify:true:30"></span>

Styling

The pipe applies specific classes so you can style them easily:

• .linkify-url — Applied to web URLs
• .linkify-email — Applied to email addresses

/* styles.css */
::ng-deep .linkify-url {
  color: blue;
  text-decoration: underline;
}

::ng-deep .linkify-email {
  color: green;
}