Net Possibility Multiplier

    ngx-linkifyjs
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.0 • Public • Published

    ngx-linkifyjs - Angular V7 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

    ngx-linkifyjs demo

    Built by and for developers ❤️

    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 ⭐️ and sharing it 📢

    Table of Contents

    Demo

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

    Documentation

    Dependencies

    • Angular (requires Angular 2 or higher, tested with 7.x)

    Installation

    Install above dependencies via npm.

    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:

    map: {
      '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 {
    }

    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

    • Default values
     
    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:

    • {{text | linkify: 'options' }}
    • {{text | linkify: '{/*your options*/}' }}
    • {{text | linkify: '{target {url: "_self" }}' }}

    Service

    Inject the NgxLinkifyjsService service

    import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';
     
    constructor(public linkifyServiceNgxLinkifyjsService) {
     } 
    }

    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

    import {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';
     
    constructor(public linkifyServiceNgxLinkifyjsService) {
      
      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

    • 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.
    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

    • value : String | Array<String> Test string

    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
      }
    }

    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
    • setup the ngx-linkifyjs package
    $ gulp steup
    • navigate to the demo app directory
    cd demo
    • install the dependencies and run the app locally
    $ npm i && npm start
    • the app is now hosted by http://localhost:4200/

    Other Angular Libraries


    Support

    Built by and for developers ❤️ we will help you 👊



    jetbrains logo

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


    License

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

    Install

    npm i ngx-linkifyjs

    DownloadsWeekly Downloads

    2,181

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    63.2 kB

    Total Files

    20

    Last publish

    Collaborators

    • anthonynahas