README
ng-parsed-text
This library is used to highlight url, email, phone that contains in the text to an anchor tag or custom link tag. By use of RegExp is used to higlight the text by default there are three patterns you can also define custom patterns and custom templates for styling the highlighted link tag.
Table of contents
Getting started
npm install --save ng-parsed-text
Then import the highlight module in your apps module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ParsedTextModule } from 'ng-parsed-text';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
ParsedTextModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Version dependency
ng-parsed-text | Angular |
---|---|
0.1.0 | 4.x |
Documentation
import { Component } from '@angular/core';
import {ParseType} from 'ng-parsed-text';
@Component({
selector: 'app-root',
template: `
<ng-parsed-text
class="parse-text"
[parse]="parse"
[text]="text"
(trigger)="handleLink($event)"
>
</ng-parsed-text>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
text = 'Angular is a TypeScriped based web application framework you can check the offical docs at https://angular.io/ for latest Angular news and tips check the angular blog at https://blog.angular.io/. Follow @angular at twitter.';
parse: ParseType[] = [{type: 'hashtag', pattern: /@(\w+)/, element: { tag: '<any>' }}];
handleLink(event) {
console.log(event);
}
}
Input Binding
name | description | type | |
---|---|---|---|
text | text need to be parsed and highlighted | string | |
parse | Define RegExp pattern to highlight text check Parse properties | Array |
Parse properties
Matched text to be rendered in anchor <a>
tag configure as
{
type: 'email',
pattern: /\S+@\S+\.\S+/,
element: {
tag: '<a>',
attributes: {
target: '_blank',
displayText(link, $event) {
// here you will get the matched url link for e.g (foo@gmail.com)
// You can return what need to show in anchor tag textContent
const result = link.match(/\w+/i);
return result[0];
},
href(link, $event) {
return `mailto:${link}`
},
},
},
}
For Custom link and templating see example stackblitz