A component that can highlight parts of text in a textarea. Useful for displaying mentions etc
Clone or download
Latest commit 9302d92 Jun 20, 2018

README.md

angular text input highlight

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

https://mattlewis92.github.io/angular-text-input-highlight/

Table of contents

About

A component that can highlight parts of text in a textarea. Useful for displaying mentions etc

Installation

Install through npm:

npm install --save angular-text-input-highlight

Include the stylesheet somewhere in your app:

node_modules/angular-text-input-highlight/text-input-highlight.css

Then include in your apps module:

import { NgModule } from '@angular/core';
import { TextInputHighlightModule } from 'angular-text-input-highlight';

@NgModule({
  imports: [
    TextInputHighlightModule
  ]
})
export class MyModule {}

Finally use in one of your apps components:

import { Component, ViewEncapsulation } from '@angular/core';
import { HighlightTag } from 'angular-text-input-highlight';

@Component({
  template: `
    <div mwlTextInputHighlightContainer>
      <textarea
        mwlTextInputElement
        [(ngModel)]="text"
        #textarea>
      </textarea>
      <mwl-text-input-highlight
        [tags]="tags"
        [textInputElement]="textarea">
      </mwl-text-input-highlight>
    </div>
  `,
  styles: [
   `
     // by default you won't see the highlighted tags until
     // you add a CSS class with a background color
     .bg-blue {
       background-color: lightblue;
     }
     .bg-pink {
       background-color: lightcoral;
     }
   `
  ],
  encapsulation: ViewEncapsulation.None
})
class MyComponent {

  text = 'this is some text';

  tags: HighlightTag[] = [{
    indices: { start: 8, end: 12 },
    cssClass: 'bg-blue',
    data: { user: { id: 1 } }
  }];

}

You may also find it useful to view the demo source.

Usage without a module bundler

<script src="node_modules/angular-text-input-highlight/bundles/angular-text-input-highlight.umd.js"></script>
<script>
    // everything is exported angularTextInputHighlight namespace
</script>

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-text-input-highlight/docs/

Credits

This component borrows heavily from the ideas of the ui-mention package.

Development

Prepare your environment

  • Install Node.js and NPM
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

npm run release

License

MIT