ng-parsed-text v0.0.2

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
• Version dependency
• Documentation
• Stackblitz

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

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

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