https://github.com/mmounirf/ngx-text-highlighter

Angular 5+ module for displaying editable textarea where you can highlight text selections and filter your previous selection based on highlighting color. Check out live demo and play around with the options
https://github.com/mmounirf/ngx-text-highlighter

angular2 angular5 angular6 highlight marker selection text-highlighter text-marker textarea

Last synced: about 1 month ago
JSON representation

Angular 5+ module for displaying editable textarea where you can highlight text selections and filter your previous selection based on highlighting color. Check out live demo and play around with the options

• Host: GitHub
• URL: https://github.com/mmounirf/ngx-text-highlighter
• Owner: mmounirf
• License: mit
• Created: 2018-11-01T10:47:54.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T16:42:43.000Z (over 3 years ago)
• Last Synced: 2025-09-18T21:50:05.852Z (9 months ago)
• Topics: angular2, angular5, angular6, highlight, marker, selection, text-highlighter, text-marker, textarea
• Language: TypeScript
• Homepage: https://mmounirf.github.io/ngx-text-highlighter/
• Size: 3.47 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![npm version](https://img.shields.io/npm/v/ngx-text-highlighter.svg)](https://www.npmjs.com/package/ngx-text-highlighter)

[![GitHub release](https://img.shields.io/github/release/mmounirf/ngx-text-highlighter.svg)](https://github.com/mmounirf/ngx-text-highlighter/releases)

[![Build Status](https://travis-ci.org/mmounirf/ngx-text-highlighter.svg?branch=master)](https://travis-ci.org/mmounirf/ngx-text-highlighter)

[![GitHub issues](https://img.shields.io/github/issues/mmounirf/ngx-text-highlighter.svg)](https://github.com/mmounirf/ngx-text-highlighter/issues)

## Text Highlighter

Angular 5+ module for displaying editable textarea where you can highlight text selections and filter your previous selection based on highlighting color. Check it out live demo and play around with the options [here](https://mmounirf.github.io/ngx-text-highlighter/)

### Table of Contents

* [Installation](#installation)

* [Usage](#usage)

* [Options](#options)

* [Example](#example)

* [Demo](https://mmounirf.github.io/ngx-text-highlighter/)

### Installation

```bash

npm install ngx-text-highlighter --save

```

### Usage

In your module add the following:

```

import { NgxTextHighlighterModule } from 'ngx-text-highlighter';

@NgModule({

  imports: [

    NgxTextHighlighterModule

  ]

})

```

In your component add the following:

```

```

### Options

| Key | Description | Type | Default |

| ----- | ----- | ----- | ----- |

| ```[colors]``` | Set of marker colors | ```Array``` | ```['#f44336', '#ffeb3b', '#4caf50']``` |

| ```[markerStyle]``` | Marker Style, changes marker appearance | ```string``` | ```'fixed'```

### Example

```html

```