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!