ng-text-highlight

🔍 A lightweight Angular standalone component to highlight search keywords within a block of text.

🌐 Homepage: https://ng-text-highlight.web.app/

🚀 Why Choose ng-text-highlight?

• 🎯 Perfect for Search Results: Highlight search terms in search results, documentation, and content
• ⚡ Lightweight & Fast: Minimal bundle size with optimal performance
• 🎨 Fully Customizable: Custom CSS classes, inline styles, and prebuilt themes
• 🔧 Easy Integration: Works with Angular 14+ as standalone component or module
• 📱 Mobile Friendly: Responsive design that works on all devices
• 🔍 Smart Search: Case-sensitive/insensitive search with multiple keyword support
• ♿ Accessible: Built with accessibility best practices

🎯 Use Cases

• Search Results: Highlight search terms in search result pages
• Documentation: Highlight keywords in help articles and documentation
• Content Filtering: Visual feedback for filtered content
• Code Editors: Syntax highlighting and keyword emphasis
• E-commerce: Highlight product features and specifications
• Educational Apps: Emphasize important terms in learning materials

---

📦 Installation

npm install ng-text-highlight

---

🚀 Usage

You can use TextHighlightComponent in two ways:

---

✅ Option 1: Import as a Standalone Component

If you're using Angular 14+ and prefer standalone components:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { TextHighlightComponent } from "ng-text-highlight";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, TextHighlightComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Template Example:

<div>
  <h4>Highlighted Text:</h4>
  <ng-text-highlight
    [fullText]="sampleText"
    [keywords]="sampleSearchText.split(' ')"
  >
  </ng-text-highlight>
</div>

---

✅ Option 2: Import via Module (TextHighlightModule)

If you prefer using Angular modules:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { FormsModule } from "@angular/forms";
import { TextHighlightModule } from "ng-text-highlight";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, TextHighlightModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Template Example:

<div>
  <h4>Highlighted Text:</h4>
  <ng-text-highlight
    [fullText]="sampleText"
    [keywords]="['Angular', 'text', 'highlight']"
  >
  </ng-text-highlight>
</div>

---

🧠 Inputs

Input	Type	Description
fullText	string	The main text where keywords will be highlighted
keywords	string[]	List of keywords to highlight
caseSensitive	boolean	Whether the search should be case-sensitive (default: false)
highlightClass	string	Custom CSS class for highlighted text (default: 'highlight')
highlightStyle	{ [key: string]: string }	Inline styles for highlighted text (e.g., { 'background-color': 'yellow' })

---

🎨 Prebuilt Styles

The following prebuilt styles are available for quick use:

Class Name	Description
highlight	Default yellow highlight
highlight-green	Light green highlight
highlight-blue	Light blue highlight
highlight-red	Red highlight with white text
highlight-purple	Purple highlight with italic text
highlight-orange	Orange highlight

Example Usage:

<ng-text-highlight
  [fullText]="sampleText"
  [keywords]="['Angular', 'highlight']"
  [highlightClass]="'highlight-green'"
></ng-text-highlight>

---

🎨 Custom Inline Styles

You can also pass custom inline styles using the highlightStyle input:

Example Usage:

<ng-text-highlight
  [fullText]="sampleText"
  [keywords]="['Angular', 'highlight']"
  [highlightStyle]="{ 'background-color': 'lightblue', 'color': 'black', 'font-weight': 'bold' }"
></ng-text-highlight>

---

📄 License

This package is licensed under the MIT License. See the LICENSE file for details.

---

📸 Example Output

Below is an example of how the ng-text-highlight component highlights text:

---

⭐ Support

Give this repo a ⭐ if you find it useful!