Home

Awesome

<p align="center"> <img height="256px" width="256px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-linkifyjs@master/demo/src/assets/logo.svg"> </p>

ngx-linkifyjs - Angular V8 wrapper for linkifyjs - library for finding links in plain text and converting them to HTML <a> tags via linkifyjs

npm version, npm Join the chat at (https://gitter.im/angular-material-extensions/Lobby CircleCI branch Build Status Coverage Status dependency Status devDependency Status Greenkeeper Badge license Awesome

<p align="center"> <img alt="ngx-linkifyjs demo" width="320px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/anthonynahas/ngx-linkifyjs@master/assets/demo.gif"> </p>

Built by and for developers :heart:

Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here

If you like this project, support ngx-linkifyjs by starring :star: and sharing it :loudspeaker:

Table of Contents

<a name="demo"/>

Demo

View all the directives in action at https://anthonynahas.github.io/ngx-linkifyjs

<a name="documentation"/>

Documentation

<a name="dependencies"/>

Dependencies

<a name="installation"/>

Installation

1. Install via ng add. (Recommended)

Now add the library via the angular schematics

ng add ngx-linkifyjs

2. Install via npm. (Alternative)

Now install ngx-linkifyjs via:

npm 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:

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

Once installed you need to import the main module:

import { 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()):

import { NgxLinkifyjsModule } from 'ngx-linkifyjs';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxLinkifyjsModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgxLinkifyjsModule:

import { NgxLinkifyjsModule } from 'ngx-linkifyjs';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxLinkifyjsModule, ...], 
})
export class OtherModule {
}
<a name="usage"/>

Usage

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

Options

ngx-linkifyjs provides an appropriate option interface called NgxLinkifyOptions to access the native options of the linkifyjs library and all of them are optional


import { NgxLinkifyOptions } from 'ngx-linkifyjs';

  const options: NgxLinkifyOptions =
   {
    attributes: null,
    className: 'linkified',
    defaultProtocol: 'http',
    events: null,
    format: function (value, type) {
      return value;
    },
    formatHref: function (href, type) {
      return href;
    },
    ignoreTags: [],
    nl2br: false,
    tagName: 'a',
    target: {
      url: '_blank'
    },
    validate: true
  };

Pipe

{{text | linkify}}

<span [innerHTML]="'Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it <3' | linkify"></span>

result: Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it <3

if you prefer to provide your own option to the pipe, you can use it like the following:

Service

Inject the NgxLinkifyjsService service

import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';

constructor(public; NgxLinkifyjsService;) {
 } 
}
<a name="linkify_method"/>

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

Convert a basic text string to a valid linkified text

Params

Returns String converted text with links

import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';

constructor(public; NgxLinkifyjsService;) {
  
  const options: NgxLinkifyOptions =
     {
      className: 'linkifiedYES',
      target : {
          url : '_self'
        }
      };
  
  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com');
  // result 1 --> see below
  
  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com', options);
    // result 2 --> see below
 } 
}

result 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

'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

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

import {Component, OnInit} from '@angular/core';
import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    
  constructor(public linkifyService: NgxLinkifyjsService) {
    const foundLinks: Link[] = this.linkifyService.find('Any links to github.com here? If not, contact test@example.com');
    
    // result - output --> see below 
  }
  
}
// Result
[
  {
    type: LinkType.URL,
    value: 'github.com',
    href: 'http://github.com'
  },
  {
    type: LinkType.EMAIL,
    value: 'test@example.com',
    href: 'mailto:test@example.com'
  }
]

test method

Is the given string a link? Not to be used for strict validation - See Caveats

Params

Returns Boolean

import {Component, OnInit} from '@angular/core';
import {NgxLinkifyjsService} from 'ngx-linkifyjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
    
  constructor(public linkifyService: NgxLinkifyjsService) {
    this.linkifyService.test('github.com'); // return true
    this.linkifyService.test('dev@example.com'); // return true
    this.linkifyService.test(['github.com', 'email']); // return false
    this.linkifyService.test('helloWorld'); // return false
  }
}
<a name="config"/>

Enable/Disable the hash and mention

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

import { NgxLinkifyjsModule } from 'ngx-linkifyjs';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxLinkifyjsModule.forRoot(
                  {
                    enableHash: false, // optional - default true
                    enableMention: false // optional - default true
                  }), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

take a look @ @angular-material-extensions/link-preview which is using ngx-linkifyjs

Run Demo App Locally

$ git clone https://github.com/AnthonyNahas/ngx-linkifyjs.git
$ gulp steup
$ cd demo
$ npm i && npm start

<a name="other-angular-libraries"/>

Other Angular Libraries


<a name="support"/>

Support

Built by and for developers :heart: we will help you :punch:



jetbrains logo

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm


<a name="license"/>

License

Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)