A Component That Can Highlight Parts of Text In A Textarea

Angular text input highlighting is a component that can highlight parts of text in a text area. Useful for displaying signals or mentions etc.

angular highlight search text, typescript highlight text, angular highlight directive, angular text selection event, highlight text in textarea angular, md highlight text example

How to make use of it:

Installation:

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

1. Include the stylesheet somewhere in your app:

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

2. Then include in your app module the following:

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

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

3. Finally, use one of your app 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 } }
  }];

}

angular component to highlight text,angular text input highlight Plugin/Github, ngx text highlight