1 upvote
0 downvotes
Comment
Log in to vote & comment

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

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 6.0.9)

Installation

Install above dependencies via npm.

Now install ngx-linkifyjs via:

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

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

Service

Inject the NgxLinkifyjsService service

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

constructor(public linkifyService: NgxLinkifyjsService) {
 } 
}

linkify method

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

constructor(public linkifyService: NgxLinkifyjsService) {
  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com');
  // result --> see below
 } 
}
'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>'

find method

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 
  }
  
}
[
  {
    type: LinkType.URL,
    value: 'github.com',
    href: 'http://github.com'
  },
  {
    type: LinkType.EMAIL,
    value: 'test@example.com',
    href: 'mailto:test@example.com'
  }
]

test method

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

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
  • link the ngx-linkifyjs package use gulp globally
$ gulp link
  • navigate to the demo app directory
$ cd demo
  • install the dependencies
$ npm i
  • run/start/serve the app
$ npm run start

or

$ ng serve --open
  • the app is now hosted by http://localhost:4200/

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

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)