Demo

Dependencies

Installation

1. Install via ng add. (Recommended)

Now add the library via the angular schematics

1ng add ngx-linkifyjs

2. Install via npm. (Alternative)

Now install ngx-linkifyjs via:

1npm i -s ngx-linkifyjs

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-linkifyjs:

1{
2  'ngx-linkifyjs';: 'node_modules/ngx-linkifyjs/bundles/ngx-linkifyjs.umd.js',
3}

Once installed you need to import the main module:

1import { NgxLinkifyjsModule } from 'ngx-linkifyjs';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxLinkifyjsModule .forRoot()):

1import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
2
3@NgModule({
4  declarations: [AppComponent, ...],
5  imports: [NgxLinkifyjsModule.forRoot(), ...],  
6  bootstrap: [AppComponent]
7})
8export class AppModule {
9}

Other modules in your application can simply import NgxLinkifyjsModule:

1import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
2
3@NgModule({
4  declarations: [OtherComponent, ...],
5  imports: [NgxLinkifyjsModule, ...], 
6})
7export class OtherModule {
8}

Usage

Once the library is imported, you can use its components, directives and pipes in your Angular application:

Options

linkify (text: string, options?: NgxLinkifyOptions): string

Convert a basic text string to a valid linkified text

Params

• text : String Text to linkify --> to convert with links
• options : NgxLinkifyjsService options to pass it to the linkifyjs library and it's optional

Returns String converted text with links

1import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';
2
3constructor(public; NgxLinkifyjsService;) {
4  
5  const options: NgxLinkifyOptions =
6     {
7      className: 'linkifiedYES',
8      target : {
9          url : '_self'
10        }
11      };
12  
13  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com');
14  // result 1 --> see below
15  
16  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com', options);
17    // result 2 --> see below
18 } 
19}

result 1

1'For help with <a href=\"http://github.com\" class=\"linkified\" target=\"_blank\">GitHub.com</a>, please email <a href=\"mailto:support@github.com\" class=\"linkified\">support@github.com</a>'

result 2

1'For help with <a href=\"http://github.com\" class=\"linkifiedYES\" target=\"_self\">GitHub.com</a>, please email <a href=\"mailto:support@github.com\" class=\"linkifiedYES\">support@github.com</a>'

find method

Finds all links in the given string

Params

• text : String search text string

Returns Array<Link> List of links where each element is a hash with properties type, value, and href:

• type is the type of entity found. Possible values are
  • 'url'
  • 'email'
  • 'hashtag' (if Hashtag is enabled via config/default true)
  • 'mention' (if Mention is enabled via config/default true)
• value is the original entity substring.
• href should be the value of this link's href attribute.

1import {Component, OnInit} from '@angular/core';
2import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';
3
4@Component({
5  selector: 'app-home',
6  templateUrl: './home.component.html',
7  styleUrls: ['./home.component.scss']
8})
9export class HomeComponent {
10    
11  constructor(public linkifyService: NgxLinkifyjsService) {
12    const foundLinks: Link[] = this.linkifyService.find('Any links to github.com here? If not, contact test@example.com');
13    
14    // result - output --> see below 
15  }
16  
17}

1// Result
2[
3  {
4    type: LinkType.URL,
5    value: 'github.com',
6    href: 'http://github.com'
7  },
8  {
9    type: LinkType.EMAIL,
10    value: 'test@example.com',
11    href: 'mailto:test@example.com'
12  }
13]

test method

Enable/Disable the hash and mention

The config argument is 100% optional, otherwise we will take the default values true

1import { NgxLinkifyjsModule } from 'ngx-linkifyjs';
2
3@NgModule({
4  declarations: [AppComponent, ...],
5  imports: [NgxLinkifyjsModule.forRoot(
6                  {
7                    enableHash: false, // optional - default true
8                    enableMention: false // optional - default true
9                  }), ...],  
10  bootstrap: [AppComponent]
11})
12export class AppModule {
13}

Other Angular Libraries

Support

License

Copyright (c) 2018 Anthony Nahas Copyright (c) 2022 Ethan Gerardot Licensed under the MIT License (MIT)