diff --git a/README.md b/README.md index 6df187e4..c0178153 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ __Jump to__ - [Node.js/Browserify](#node-js-browserify) - [AMD Modules](#amd-modules) - [Browser](#browser) + - [Angular with ngx-linkifyjs](#angular) - [Internet Explorer](#internet-explorer) - [Downloads](#downloads) - [API Documentation](#api-documentation) @@ -175,6 +176,164 @@ ReactDOM.render( ); ``` + + +### Angular with [ngx-linkifyjs](https://github.com/AnthonyNahas/ngx-linkifyjs) + +#### Install + +```shell +npm install --save ngx-linkifyjs +``` + +#### Import the `NgxLinkifyjsModule` + +--- +##### 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`: +```js +map: { + 'ngx-linkifyjs': 'node_modules/ngx-linkifyjs/bundles/ngx-linkifyjs.umd.js', +} +``` +--- + +Once installed you need to import the main module: +```js +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()`): +```js +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 `: + +```js +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: + +#### Using the Pipe + +`{{text | linkify}}` + +```html + +``` + +**result**: Linkify the following URL: [https://github.com/anthonynahas/ngx-linkifyjs](https://github.com/anthonynahas/ngx-linkifyjs) and share it <3 + +#### Using the Service + +Inject the `NgxLinkifyjsService` service + +```typescript +import {NgxLinkifyjsService, Link, LinkType} from 'ngx-linkifyjs'; + +constructor(public linkifyService: NgxLinkifyjsService) { + } +} +``` + +#### `linkify` method +```typescript +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 + } +} +``` + +```typescript +'For help with GitHub.com, please email support@github.com' +``` + +#### `find` method + +```typescript +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 + } + +} +``` + +```typescript +[ + { + type: LinkType.URL, + value: 'github.com', + href: 'http://github.com' + }, + { + type: LinkType.EMAIL, + value: 'test@example.com', + href: 'mailto:test@example.com' + } +] +``` + +#### `test` method + +```typescript +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 + } +} +``` + + +#### + ## Internet Explorer Linkify natively supports Internet Explorer 9 and above. Internet Explorer 8 is supported with a polyfill.