🔍 Angular Search Highlight Directive

A lightweight Angular directive to highlight search text dynamically in the UI.

📦 Installation

npm install @tejaskedare/search-highlight

🚀 Usage

1. Import (Standalone)

import { SearchHighlightDirective } from '@tejaskedare/search-highlight';

@Component({
  standalone: true,
  imports: [SearchHighlightDirective],
})
export class AppComponent {}

2. Use in Template

<p [appSearchHighlight]="searchTerm">
  Angular makes development easier and faster
</p>

🎨 Styling

You can style the highlighted text using a CSS class:

.highlight {
  background-color: yellow;
  font-weight: bold;
}

⚙️ Features

• Highlights matching text dynamically
• Case-insensitive search
• Works with Angular view encapsulation (no styling issues)
• No need for ::ng-deep or global hacks
• Supports custom CSS class for flexible styling

🔧 Inputs

| Input | Type | Description | | ------------------ | ------ | ---------------------------- | | appSearchHighlight | string | Text to search and highlight | | highlightClass | string | (Optional) CSS class name |

💡 Example

searchTerm = "angular";

<p [appSearchHighlight]="searchTerm">
  Angular makes development easier
</p>

👉 Output: "Angular" will be highlighted

🎨 Custom Styling Example

<p 
  [appSearchHighlight]="searchTerm" 
  highlightClass="blue-highlight">
  Angular makes development easier
</p>

.blue-highlight {
  background-color: lightblue;
}

📁 Package

@tejaskedare/search-highlight

👨‍💻 Author

Tejas Kedare

📜 License

MIT