{"id":15508471,"url":"https://github.com/anthonynahas/ngx-linkifyjs","last_synced_at":"2025-04-12T01:42:58.692Z","repository":{"id":32776832,"uuid":"142051706","full_name":"AnthonyNahas/ngx-linkifyjs","owner":"AnthonyNahas","description":"Angular V8 wrapper for linkifyjs -  library for finding links in plain text and converting them to HTML \u003ca\u003e tags via linkifyjs","archived":false,"fork":false,"pushed_at":"2023-01-04T08:20:54.000Z","size":20240,"stargazers_count":42,"open_issues_count":66,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T06:26:51.144Z","etag":null,"topics":["angular","autolink","email","find-links","hashtags","library","linkifyjs","links","mentions","ngx","text","url"],"latest_commit_sha":null,"homepage":"https://anthonynahas.github.io/ngx-linkifyjs","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AnthonyNahas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-23T18:13:10.000Z","updated_at":"2024-11-18T15:34:07.000Z","dependencies_parsed_at":"2023-01-14T22:11:51.710Z","dependency_job_id":null,"html_url":"https://github.com/AnthonyNahas/ngx-linkifyjs","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-linkifyjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-linkifyjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-linkifyjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AnthonyNahas%2Fngx-linkifyjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AnthonyNahas","download_url":"https://codeload.github.com/AnthonyNahas/ngx-linkifyjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358555,"owners_count":21090402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","autolink","email","find-links","hashtags","library","linkifyjs","links","mentions","ngx","text","url"],"created_at":"2024-10-02T09:38:44.222Z","updated_at":"2025-04-12T01:42:58.666Z","avatar_url":"https://github.com/AnthonyNahas.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"256px\" width=\"256px\" style=\"text-align: center;\" src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-linkifyjs@master/demo/src/assets/logo.svg\"\u003e\n\u003c/p\u003e\n\n# ngx-linkifyjs - Angular V8 wrapper for linkifyjs -  library for finding links in plain text and converting them to HTML \u0026lt;a\u0026gt; tags via linkifyjs\n\n[![npm version](https://badge.fury.io/js/ngx-linkifyjs.svg)](https://badge.fury.io/js/ngx-linkifyjs),\n[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://anthonynahas.github.io/ngx-linkifyjs)\n[![Join the chat at (https://gitter.im/angular-material-extensions/Lobby](https://badges.gitter.im/ngx-auth-firebaseui/Lobby.svg)](https://gitter.im/angular-material-extensions/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![CircleCI branch](https://img.shields.io/circleci/project/github/AnthonyNahas/ngx-linkifyjs/master.svg?label=circleci)](https://circleci.com/gh/AnthonyNahas/ngx-linkifyjs)\n[![Build Status](https://travis-ci.org/AnthonyNahas/ngx-linkifyjs.svg?branch=master)](https://travis-ci.org/AnthonyNahas/ngx-linkifyjs)\n[![Coverage Status](https://coveralls.io/repos/github/AnthonyNahas/ngx-linkifyjs/badge.svg?branch=master)](https://coveralls.io/github/AnthonyNahas/ngx-linkifyjs?branch=master)\n[![dependency Status](https://david-dm.org/anthonynahas/ngx-linkifyjs/status.svg)](https://david-dm.org/anthonynahas/ngx-linkifyjs)\n[![devDependency Status](https://david-dm.org/anthonynahas/ngx-linkifyjs/dev-status.svg?branch=master)](https://david-dm.org/anthonynahas/ngx-linkifyjs#info=devDependencies)\n[![Greenkeeper Badge](https://badges.greenkeeper.io/anthonynahas/ngx-linkifyjs.svg)](https://greenkeeper.io/)\n[![license](https://img.shields.io/github/license/anthonynahas/ngx-linkifyjs.svg?style=flat-square)](https://github.com/AnthonyNahas/ngx-linkifyjs/blob/master/LICENSE)\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/gdi2290/awesome-angular)\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"ngx-linkifyjs demo\" width=\"320px\" style=\"text-align: center;\" \n  src=\"https://cdn.jsdelivr.net/gh/anthonynahas/ngx-linkifyjs@master/assets/demo.gif\"\u003e\n\u003c/p\u003e\n\n## Built by and for developers :heart:\nDo you have any question or suggestion ? Please do not hesitate to contact us!\nAlternatively, provide a PR | open an appropriate issue [here](https://github.com/anthonynahas/ngx-linkifyjs/issues)\n\nIf you like this project, support [ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs) \nby starring :star: and sharing it :loudspeaker:\n\n\n\n## Table of Contents\n- [Demo](#demo)\n- [Features](#features)\n- [Documentation](#documentation)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Config](#config)\n- [Run Demo App Locally](#run-demo-app-locally)\n- [Other Angular Libraries](#other-angular-libraries)\n- [Support](#support)\n- [License](#license)\n\n\u003ca name=\"demo\"/\u003e\n\n## Demo\n\nView all the directives in action at https://anthonynahas.github.io/ngx-linkifyjs\n\n\u003ca name=\"documentation\"/\u003e\n\n## [Documentation](https://anthonynahas.github.io/ngx-linkifyjs/doc/index.html)\n\n\u003ca name=\"dependencies\"/\u003e\n\n## Dependencies\n* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 7.x)\n\n\u003ca name=\"installation\"/\u003e\n\n# Installation\n\n## 1. Install via *ng add*. (Recommended)\n\nNow add the library via the `angular schematics`\n```shell\nng add ngx-linkifyjs\n```\n\n## 2. Install via *npm*. (Alternative) \n\nNow install `ngx-linkifyjs` via:\n```shell\nnpm i -s ngx-linkifyjs\n```\n\n---\n##### SystemJS\n\u003e**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.\nIn your systemjs config file, `map` needs to tell the System loader where to look for `ngx-linkifyjs`:\n```js\n{\n  'ngx-linkifyjs';: 'node_modules/ngx-linkifyjs/bundles/ngx-linkifyjs.umd.js',\n}\n```\n---\n\nOnce installed you need to import the main module:\n```js\nimport { NgxLinkifyjsModule } from 'ngx-linkifyjs';\n```\nThe only remaining part is to list the imported module in your application module. The exact method will be slightly\ndifferent for the root (top-level) module for which you should end up with the code similar to (notice ` NgxLinkifyjsModule .forRoot()`):\n```typescript\nimport { NgxLinkifyjsModule } from 'ngx-linkifyjs';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgxLinkifyjsModule.forRoot(), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nOther modules in your application can simply import ` NgxLinkifyjsModule `:\n\n```js\nimport { NgxLinkifyjsModule } from 'ngx-linkifyjs';\n\n@NgModule({\n  declarations: [OtherComponent, ...],\n  imports: [NgxLinkifyjsModule, ...], \n})\nexport class OtherModule {\n}\n```\n\n\u003ca name=\"usage\"/\u003e\n\n## Usage\n\nOnce the library is imported, you can use its components, directives and pipes in your Angular application:\n\n### Options\n\n`ngx-linkifyjs` provides an appropriate option interface called `NgxLinkifyOptions` to access [the native options of the linkifyjs library](https://soapbox.github.io/linkifyjs/docs/options.html)\nand all of them are optional\n- Default values\n\n```typescript\n\nimport { NgxLinkifyOptions } from 'ngx-linkifyjs';\n\n  const options: NgxLinkifyOptions =\n   {\n    attributes: null,\n    className: 'linkified',\n    defaultProtocol: 'http',\n    events: null,\n    format: function (value, type) {\n      return value;\n    },\n    formatHref: function (href, type) {\n      return href;\n    },\n    ignoreTags: [],\n    nl2br: false,\n    tagName: 'a',\n    target: {\n      url: '_blank'\n    },\n    validate: true\n  };\n```\n\n### Pipe\n\n`{{text | linkify}}`\n\n```html\n\u003cspan [innerHTML]=\"'Linkify the following URL: https://github.com/anthonynahas/ngx-linkifyjs and share it \u003c3' | linkify\"\u003e\u003c/span\u003e\n```\n\n**result**: Linkify the following URL: [https://github.com/anthonynahas/ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs) and share it \u003c3\n\nif you prefer to provide your own option to the `pipe`, you can use it like the following:\n\n- `{{text | linkify: 'options' }}` \n- `{{text | linkify: '{/*your options*/}' }}` \n- `{{text | linkify: '{target {url: \"_self\" }}' }}`\n\n\n### Service\n\nInject the `NgxLinkifyjsService` service\n\n```typescript\nimport {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';\n\nconstructor(public; NgxLinkifyjsService;) {\n } \n}\n```\n\n\u003ca name=\"linkify_method\"/\u003e\n\n#### linkify _(text: string, options?: NgxLinkifyOptions): string_\n\nConvert a basic text string to a valid linkified text\n\n**Params**\n\n*  **`text`** : _`String`_ Text to linkify --\u003e to convert with links\n*  **`options`** : _`NgxLinkifyjsService`_ options to pass it to the linkifyjs library and it's optional\n\n**Returns** _`String`_  converted text with links\n\n\n```typescript\nimport {NgxLinkifyjsService, Link, LinkType, NgxLinkifyOptions} from 'ngx-linkifyjs';\n\nconstructor(public; NgxLinkifyjsService;) {\n  \n  const options: NgxLinkifyOptions =\n     {\n      className: 'linkifiedYES',\n      target : {\n          url : '_self'\n        }\n      };\n  \n  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com');\n  // result 1 --\u003e see below\n  \n  this.linkifyService.linkify('For help with GitHub.com, please email support@github.com', options);\n    // result 2 --\u003e see below\n } \n}\n```\n\nresult 1\n```typescript\n'For help with \u003ca href=\\\"http://github.com\\\" class=\\\"linkified\\\" target=\\\"_blank\\\"\u003eGitHub.com\u003c/a\u003e, please email \u003ca href=\\\"mailto:support@github.com\\\" class=\\\"linkified\\\"\u003esupport@github.com\u003c/a\u003e'\n```\n\nresult 2\n```typescript\n'For help with \u003ca href=\\\"http://github.com\\\" class=\\\"linkifiedYES\\\" target=\\\"_self\\\"\u003eGitHub.com\u003c/a\u003e, please email \u003ca href=\\\"mailto:support@github.com\\\" class=\\\"linkifiedYES\\\"\u003esupport@github.com\u003c/a\u003e'\n```\n\n#### `find` method\n\nFinds all links in the given string\n\n**Params**\n\n*  **`text`** : _`String`_ search text string\n\n**Returns** _`Array\u003cLink\u003e`_ List of links where each element is a hash with properties type, value, and href:\n\n\n* **type** is the type of entity found. Possible values are\n  - `'url'`\n  - `'email'`\n  - `'hashtag'` (if Hashtag is enabled via config/default `true`)\n  - `'mention'` (if Mention is enabled via config/default `true`)\n* **value** is the original entity substring.\n* **href** should be the value of this link's `href` attribute.\n\n```typescript\nimport {Component, OnInit} from '@angular/core';\nimport {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.component.html',\n  styleUrls: ['./home.component.scss']\n})\nexport class HomeComponent {\n    \n  constructor(public linkifyService: NgxLinkifyjsService) {\n    const foundLinks: Link[] = this.linkifyService.find('Any links to github.com here? If not, contact test@example.com');\n    \n    // result - output --\u003e see below \n  }\n  \n}\n```\n\n```typescript\n// Result\n[\n  {\n    type: LinkType.URL,\n    value: 'github.com',\n    href: 'http://github.com'\n  },\n  {\n    type: LinkType.EMAIL,\n    value: 'test@example.com',\n    href: 'mailto:test@example.com'\n  }\n]\n```\n\n#### `test` method\n\nIs the given string a link? Not to be used for strict validation - See [Caveats](caveats.html)\n\n**Params**\n\n* **`value`** : _`String`_ |  _`Array\u003cString\u003e`_  Test string\n\n**Returns** _`Boolean`_\n\n```typescript\nimport {Component, OnInit} from '@angular/core';\nimport {NgxLinkifyjsService} from 'ngx-linkifyjs';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.component.html',\n  styleUrls: ['./home.component.scss']\n})\nexport class HomeComponent {\n    \n  constructor(public linkifyService: NgxLinkifyjsService) {\n    this.linkifyService.test('github.com'); // return true\n    this.linkifyService.test('dev@example.com'); // return true\n    this.linkifyService.test(['github.com', 'email']); // return false\n    this.linkifyService.test('helloWorld'); // return false\n  }\n}\n```\n\n\u003ca name=\"config\"/\u003e\n\n#### Enable/Disable the hash and mention\n\nThe config argument is 100% optional, otherwise we will take the default values `true`\n\n```typescript\nimport { NgxLinkifyjsModule } from 'ngx-linkifyjs';\n\n@NgModule({\n  declarations: [AppComponent, ...],\n  imports: [NgxLinkifyjsModule.forRoot(\n                  {\n                    enableHash: false, // optional - default true\n                    enableMention: false // optional - default true\n                  }), ...],  \n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\ntake a look @ [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview) which is using `ngx-linkifyjs`\n\n## Run Demo App Locally\n\n- [clone this repo](https://github.com/AnthonyNahas/ngx-linkifyjs.git) by running\n```bash\n$ git clone https://github.com/AnthonyNahas/ngx-linkifyjs.git\n```\n\n- setup the ngx-linkifyjs package\n\n```bash\n$ gulp steup\n```\n\n- navigate to the demo app directory\n```bash\n$ cd demo\n```\n\n- install the dependencies and run the app locally\n```bash\n$ npm i \u0026\u0026 npm start\n```\n\n- the app is now hosted by `http://localhost:4200/`\n\n---\n\n\n\u003ca name=\"other-angular-libraries\"/\u003e\n\n## Other Angular Libraries\n- [ngx-auth-firebaseui](https://github.com/anthonynahas/ngx-auth-firebaseui)\n- [@firebaseui/ng-bootstrap](https://github.com/firebaseui/ng-bootstrap)\n- [@angular-material-extensions/password-strength](https://github.com/angular-material-extensions/password-strength)\n- [@angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview)\n- [@angular-material-extensions/select-country](https://github.com/angular-material-extensions/select-country)\n- [@angular-material-extensions/pages](https://github.com/angular-material-extensions/pages)\n- [@angular-material-extensions/contacts](https://github.com/angular-material-extensions/contacts)\n- [@angular-material-extensions/faq](https://github.com/angular-material-extensions/faq)\n- [@angular-material-extensions/jumbotron](https://github.com/angular-material-extensions/jumbotron)\n- [@angular-material-extensions/google-maps-autocomplete](https://github.com/angular-material-extensions/google-maps-autocomplete)\n- [@angular-material-extensions/combination-generator](https://github.com/angular-material-extensions/combination-generator)\n\n---\n\n\u003ca name=\"support\"/\u003e\n\n## Support\n+ Drop an email to: [Anthony Nahas](mailto:anthony.na@hotmail.de)\n+ or open an appropriate [issue](https://github.com/anthonynahas/ngx-linkifyjs/issues)\n+ let us chat on [Gitter](https://gitter.im/angular-material-extensions/Lobby)\n \n Built by and for developers :heart: we will help you :punch:\n\n---\n\n---\n\n![jetbrains logo](assets/jetbrains-variant-4_logos/jetbrains-variant-4.png)\n\nThis project is supported by [jetbrains](https://www.jetbrains.com/) with 1 ALL PRODUCTS PACK OS LICENSE incl. [webstorm](https://www.jetbrains.com/webstorm)\n\n---\n\n\u003ca name=\"license\"/\u003e\n\n## License\n\nCopyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-linkifyjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanthonynahas%2Fngx-linkifyjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanthonynahas%2Fngx-linkifyjs/lists"}