npmpackage.info

Gathering detailed insights and metrics for ngx-linkifyjs

Other packages similar to ngx-linkifyjs

ngx-linkifyjs-v2

19.0.0

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

@code-name-jack/ngx-linkifyjs

18.0.0

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

@codenamejack/ngx-linkifyjs-v2

14.0.2

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

Gathering detailed insights and metrics for ngx-linkifyjs

ngx-linkifyjs

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

1.3.0

MIT

HTML

61.73 kB

744,768 1.7

Installations

npm install ngx-linkifyjs

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.15.0

NPM Version

6.4.1 Score

53.7

Supply Chain

90.6

Quality

75.4

Maintenance

Vulnerability

98.6

License

Pull Requests

Open

42

Total

127

Closed

83

Merged

2

Issues

Open

24

Total

60

Closed

36

Releases

Release 1.4.0

1.4.0

Published on 30 Nov 2019

v1.3.0

Published on 10 Jan 2019

v1.2.2

Published on 26 Nov 2018

v1.2.1

Published on 25 Nov 2018

v1.2.0

Published on 21 Nov 2018

v1.1.0

Published on 19 Oct 2018

View all 7 releases

Contributors

Unable to fetch Contributors

View all 5 contributors

Languages

HTML

TypeScript

JavaScript

CSS

HTML (46.13%)

TypeScript (40.91%)

JavaScript (8.14%)

CSS (4.81%)

Developer

anthonynahas

Download Statistics

Total Downloads

744,768

Last Day

128

Last Week

1,035

Last Month

4,917

Last Year

70,255

GitHub Statistics

42 Stars

153 Commits

21 Forks

3 Watching

823 Branches

5 Contributors

Maintainers

Package Meta Information

Latest Version

1.3.0

Package Id

ngx-linkifyjs@1.3.0

Unpacked Size

61.73 kB

Size

12.33 kB

File Count

NPM Version

6.4.1

Node Version

10.15.0

Total Downloads

Cumulative downloads

Total Downloads

744,768

Last day

-40.5%

128

Compared to previous day

Last week

-13%

1,035

Compared to previous week

Last month

20.9%

4,917

Compared to previous month

Last year

-43.4%

70,255

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

linkifyjs

Peer Dependencies

@angular/common @angular/core

Versions

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

ngx-linkifyjs demo

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:

Demo
Features
Documentation
Installation
Usage
Config
Run Demo App Locally
Other Angular Libraries
Support
License

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:

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:

1map: {
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

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

1
2import { NgxLinkifyOptions } from 'ngx-linkifyjs';
3
4  const options: NgxLinkifyOptions =
5   {
6    attributes: null,
7    className: 'linkified',
8    defaultProtocol: 'http',
9    events: null,
10    format: function (value, type) {
11      return value;
12    },
13    formatHref: function (href, type) {
14      return href;
15    },
16    ignoreTags: [],
17    nl2br: false,
18    tagName: 'a',
19    target: {
20      url: '_blank'
21    },
22    validate: true
23  };

Pipe

{{text | linkify}}

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

1import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';
2
3constructor(public linkifyService: NgxLinkifyjsService) {
4 } 
5}

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

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

Params

value : String | Array<String> Test string

Returns Boolean

1import {Component, OnInit} from '@angular/core';
2import {NgxLinkifyjsService} 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    this.linkifyService.test('github.com'); // return true
13    this.linkifyService.test('dev@example.com'); // return true
14    this.linkifyService.test(['github.com', 'email']); // return false
15    this.linkifyService.test('helloWorld'); // return false
16  }
17}

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}

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

Run Demo App Locally

clone this repo by running

1$ git clone https://github.com/AnthonyNahas/ngx-linkifyjs.git

setup the ngx-linkifyjs package

1$ gulp steup

navigate to the demo app directory

1$ cd demo

install the dependencies and run the app locally

1$ npm i && npm start

the app is now hosted by http://localhost:4200/

Other Angular Libraries

Support

Drop an email to: Anthony Nahas
or open an appropriate issue
let us chat on Gitter

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

License

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

146 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-3w3w-pxmm-2w2j
Warn: Project is vulnerable to: GHSA-xwcq-pm8m-c4vf
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
Warn: Project is vulnerable to: GHSA-297x-8xj4-vcxv
Warn: Project is vulnerable to: GHSA-4859-gpc7-4j66
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-gxr4-xjj5-5px2
Warn: Project is vulnerable to: GHSA-jpcq-cgw6-v4j6
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-jg8v-48h5-wgxg
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-3wc5-fcw2-2329
Warn: Project is vulnerable to: GHSA-64fm-8hw2-v72w
Warn: Project is vulnerable to: GHSA-f98w-7cxr-ff2h
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qm28-7hqv-wg5j
Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
Warn: Project is vulnerable to: GHSA-px4h-xg32-q955
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-wvhm-4hhf-97x9
Warn: Project is vulnerable to: GHSA-h4hr-7fg3-h35w
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-884p-74jh-xrg2
Warn: Project is vulnerable to: GHSA-j7fq-p9q7-5wfv
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4fc4-chg7-h8gh
Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

1.7

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to ngx-linkifyjs

Other packages similar to ngx-linkifyjs

ngx-linkifyjs

Installations

Developer Guide

No

CommonJS

10.15.0

6.4.1

Score

Pull Requests

42

127

83

2

Issues

24

60

36

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

744,768

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

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

Built by and for developers :heart:

Table of Contents

Demo

Documentation

Dependencies

Installation

SystemJS

Usage

Options

Pipe

Service

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

find method

test method

Enable/Disable the hash and mention

Run Demo App Locally

Other Angular Libraries

Support

License

10

10

0

0

0

0

0

0

0

0

1.7

/10

`find` method

`test` method