Angular wrapper for linkifyjs(v4) - library for finding links in plain text and converting them to HTML <a> tags via linkifyjs
npm install @code-name-jack/ngx-linkifyjs

> Angular 20+ wrapper for linkifyjs - Automatically find and convert URLs, emails, hashtags, and mentions in text to HTML links.
src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-linkifyjs@master/assets/demo.gif">
- ๐ Auto-detect URLs - Finds and linkifies URLs (with or without protocol)
- ๐ง Email addresses - Converts emails to mailto: links
- #๏ธโฃ Hashtags - Linkify hashtags for social media content
- @ Mentions - Convert @mentions to links
- ๐จ Customizable - Full control over link styling and behavior
- ๐ Angular 20+ - Built for modern Angular with standalone-first architecture
- ๐ฆ Tree-shakeable - Optimized bundle size
- ๐ง TypeScript - Full type safety
A comprehensive demo application is available in the repository showcasing:
- ๐จ Interactive examples with live editing
- ๐ง Service API demonstrations
- โ๏ธ Configuration options showcase
- ๐ Copy-paste code examples
---
``bash`
ng add @code-name-jack/ngx-linkifyjs
`bash`
npm install @code-name-jack/ngx-linkifyjs
---
1. Configure in your app (app.config.ts):
`typescript
import { ApplicationConfig } from '@angular/core';
import { provideNgxLinkifyjs } from '@code-name-jack/ngx-linkifyjs';
export const appConfig: ApplicationConfig = {
providers: [
provideNgxLinkifyjs({
enableHash: true, // Enable hashtag detection
enableMention: true // Enable @mention detection
})
]
};
`
2. Import the pipe in your component:
`typescript
import { Component } from '@angular/core';
import { NgxLinkifyjsPipe } from '@code-name-jack/ngx-linkifyjs';
@Component({
selector: 'app-example',
standalone: true,
imports: [NgxLinkifyjsPipe],
template:
})
export class ExampleComponent {
text = 'Visit https://github.com or email info@example.com';
}
`3. Using the service:
`typescript
import { Component, inject } from '@angular/core';
import { NgxLinkifyjsService } from '@code-name-jack/ngx-linkifyjs';@Component({
selector: 'app-example',
standalone: true
})
export class ExampleComponent {
private linkifyService = inject(NgxLinkifyjsService);
constructor() {
// Find all links
const links = this.linkifyService.find('Visit github.com');
// Output: [{ type: 'url', value: 'github.com', href: 'http://github.com' }]
// Test if text contains links
const hasLinks = this.linkifyService.test('example.com'); // true
// Convert text to HTML
const html = this.linkifyService.linkify('Visit example.com');
}
}
`> Note: Since
NgxLinkifyjsService uses providedIn: 'root', it's automatically available once you add provideNgxLinkifyjs() to your app config. The provideNgxLinkifyjs() function is only needed to configure plugin options (hashtags/mentions).---
๐ Usage Guide
$3
The
linkify pipe transforms text into linkified HTML:`html
``typescript
import { NgxLinkifyOptions } from '@code-name-jack/ngx-linkifyjs';export class MyComponent {
text = 'Check out github.com and follow @angular!';
options: NgxLinkifyOptions = {
className: 'custom-link',
target: { url: '_blank' },
defaultProtocol: 'https'
};
}
`$3
The
NgxLinkifyjsService provides programmatic access to linkify functionality:#### 1๏ธโฃ
linkify(text: string, options?: NgxLinkifyOptions): stringConverts text to linkified HTML string.
`typescript
const html = this.linkifyService.linkify(
'Visit github.com or email support@example.com',
{
className: 'my-link',
target: { url: '_blank' }
}
);
// Output: 'Visit github.com or email support@example.com'
`#### 2๏ธโฃ
find(text: string): Link[]Finds all links in text and returns an array of link objects.
`typescript
const links = this.linkifyService.find(
'Visit github.com or email test@example.com #angular'
);
// Output:
// [
// { type: 'url', value: 'github.com', href: 'http://github.com' },
// { type: 'email', value: 'test@example.com', href: 'mailto:test@example.com' },
// { type: 'hashtag', value: '#angular', href: '#angular' }
// ]
`#### 3๏ธโฃ
test(value: string | string[]): booleanTests if a string (or all strings in an array) contains valid links.
`typescript
this.linkifyService.test('github.com'); // true
this.linkifyService.test('hello world'); // false
this.linkifyService.test(['github.com', 'test.com']); // true
this.linkifyService.test(['github.com', 'hello']); // false
`---
โ๏ธ Configuration Options
$3
All options are optional and follow the linkifyjs options:
`typescript
interface NgxLinkifyOptions {
/**
* Add custom attributes to links
*/
attributes?: Record;
/**
* CSS class to add to links (default: 'linkified')
*/
className?: string;
/**
* Default protocol for URLs without one (default: 'http')
*/
defaultProtocol?: string;
/**
* Event handlers for links
*/
events?: Record void>;
/**
* Format the link text
*/
format?: (value: string, type: string) => string;
/**
* Format the href attribute
*/
formatHref?: (href: string, type: string) => string;
/**
* HTML tags to ignore when linkifying
*/
ignoreTags?: string[];
/**
* Convert newlines to
tags
*/
nl2br?: boolean;
/**
* HTML tag to use for links (default: 'a')
*/
tagName?: string;
/**
* Target attribute for links
*/
target?: { url: string };
/**
* Validate links before linkifying
*/
validate?: boolean;
}
`$3
`typescript
import { NgxLinkifyOptions } from '@code-name-jack/ngx-linkifyjs';export class MyComponent {
options: NgxLinkifyOptions = {
className: 'fancy-link',
target: { url: '_blank' },
defaultProtocol: 'https',
// Customize link text
format: (value, type) => {
if (type === 'url' && value.length > 50) {
return value.slice(0, 50) + 'โฆ';
}
return value;
},
// Customize href
formatHref: (href, type) => {
if (type === 'hashtag') {
return 'https://twitter.com/hashtag/' + href.slice(1);
}
return href;
},
// Add custom attributes
attributes: {
rel: 'noopener noreferrer'
}
};
}
`$3
Configure hashtag and mention support globally:
`typescript
// For standalone apps (in app.config.ts)
import { ApplicationConfig } from '@angular/core';
import { NgxLinkifyjsService, NgxLinkifyjsConfigToken } from '@code-name-jack/ngx-linkifyjs';export const appConfig: ApplicationConfig = {
providers: [
NgxLinkifyjsService,
{
provide: NgxLinkifyjsConfigToken,
useValue: {
enableHash: true, // Enable #hashtag detection
enableMention: true // Enable @mention detection
}
}
]
};
// In app.config.ts
import { provideNgxLinkifyjs } from '@code-name-jack/ngx-linkifyjs';
export const appConfig: ApplicationConfig = {
providers: [
provideNgxLinkifyjs({
enableHash: false, // Disable hashtags
enableMention: false // Disable mentions
})
]
};
`---
๐จ Styling Links
Add custom CSS to style your linkified links:
`css
/ Default linkified class /
.linkified {
color: #0066cc;
text-decoration: underline;
}.linkified:hover {
color: #0052a3;
}
/ Custom class from options /
.custom-link {
color: #667eea;
font-weight: 600;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.custom-link:hover {
border-bottom-color: #667eea;
}
`---
๐ Link Types
The library detects four types of links:
| Type | Example | Output |
|------|---------|--------|
| URL |
https://example.com | ... |
| Email | user@example.com | ... |
| Hashtag | #angular | #angular |
| Mention | @username | @username |> ๐ก Note: Hashtags and mentions are enabled by default but can be disabled in configuration.
---
๐ฑ Real-World Examples
$3
`typescript
@Component({
template:
})
export class PostComponent {
post = 'Check out the new @angular release! ๐ #Angular20 https://angular.io';
socialOptions: NgxLinkifyOptions = {
target: { url: '_blank' },
formatHref: (href, type) => {
if (type === 'hashtag') {
return https://twitter.com/hashtag/${href.slice(1)};
}
if (type === 'mention') {
return https://twitter.com/${href.slice(1)};
}
return href;
}
};
}
`$3
`typescript
@Component({
template:
})
export class CommentsComponent {
comments = [
{ text: 'Great article! See more at example.com' },
{ text: 'Contact me at john@example.com for details' }
];
commentOptions: NgxLinkifyOptions = {
className: 'comment-link',
target: { url: '_blank' },
attributes: {
rel: 'nofollow noopener'
}
};
}
`$3
`typescript
@Component({
selector: 'chat-message',
template:
})
export class ChatMessageComponent {
@Input() message!: string;
}
`---
๐งช Testing
When testing components that use ngx-linkifyjs:
`typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NgxLinkifyjsPipe, NgxLinkifyjsService } from '@code-name-jack/ngx-linkifyjs';describe('MyComponent', () => {
let component: MyComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MyComponent, NgxLinkifyjsPipe],
providers: [NgxLinkifyjsService]
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
component = fixture.componentInstance;
});
it('should linkify URLs', () => {
component.text = 'Visit example.com';
fixture.detectChanges();
const element = fixture.nativeElement;
expect(element.querySelector('a')).toBeTruthy();
expect(element.querySelector('a').href).toContain('example.com');
});
});
`---
๐ API Reference
$3
`typescript
// Provider function (for both standalone and NgModule apps)
export { provideNgxLinkifyjs }// Standalone pipe
export { NgxLinkifyjsPipe }
// Service
export { NgxLinkifyjsService }
// Types & Interfaces
export { NgxLinkifyOptions }
export { NgxLinkifyjsConfig }
export { Link }
export { LinkType }
// Tokens
export { NgxLinkifyjsConfigToken }
export { DEFAULT_CONFIG }
`$3
`typescript
interface Link {
type: string; // 'url' | 'email' | 'hashtag' | 'mention'
value: string; // Original text
href: string; // Generated href attribute
}enum LinkType {
URL = 'url',
EMAIL = 'email',
HASHTAG = 'hashtag',
MENTION = 'mention'
}
interface NgxLinkifyjsConfig {
enableHash?: boolean; // Enable hashtag detection (default: true)
enableMention?: boolean; // Enable mention detection (default: true)
}
``---
Contributions are welcome! Please feel free to submit a Pull Request.
For development setup and publishing instructions, see the Developer Guide.
---
- ๐ Report bugs
- ๐ก Request features
- ๐ฌ Ask questions
---
Copyright (c) 2018 Anthony Nahas
Copyright (c) 2022 Ethan Gerardot
Copyright (c) 2025 Code Name Jack
Licensed under the MIT License
---
If this project helped you, please consider:
- โญ Starring the repository
- ๐ Reporting bugs
- ๐ก Suggesting features
- ๐ข Sharing with others
---
- @angular-material-extensions/link-preview - Link preview component using ngx-linkifyjs
- linkifyjs - The underlying linkify library
---
Made with โค๏ธ for the Angular community

Supported by JetBrains with 1 ALL PRODUCTS PACK OS LICENSE