angular text input highlight

Demo

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

Table of contents

• About
• Installation
• Documentation
• Development
• License

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