mattlewis92 / angular-text-input-highlight

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

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