Have ideas to improve npm?Join in the discussion! ¬Ľ

    angular-text-input-highlight
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.3¬†‚Äʬ†Public¬†‚Äʬ†Published

    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

    Install

    npm i angular-text-input-highlight

    DownloadsWeekly Downloads

    884

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar