ng-text-highlight
Version:
A lightweight standalone Angular 19 component/module for highlighting text.
50 lines (49 loc) • 2.04 kB
TypeScript
import { OnChanges, SimpleChanges } from "@angular/core";
import { TextSegment } from "./models/text-segment";
import * as i0 from "@angular/core";
/**
* TextHighlightComponent
* A standalone Angular component that highlights specified keywords within a block of text.
*/
export declare class TextHighlightComponent implements OnChanges {
/**
* The main text where keywords will be highlighted.
*/
fullText: string;
/**
* List of keywords to highlight in the text.
*/
keywords: Array<string>;
/**
* Whether the search should be case-sensitive.
*/
caseSensitive: boolean;
/**
* Custom CSS class for highlighted text.
*/
highlightClass: string;
/**
* Inline styles for highlighted text.
*/
highlightStyle: {
[key: string]: string;
};
/**
* Array of text segments, each representing a portion of the text
* with information about whether it is highlighted.
*/
highlightedSegments: Array<TextSegment>;
/**
* Lifecycle hook that is triggered when any data-bound property changes.
* Calls the method to generate highlighted segments.
* @param changes - The changes to the input properties.
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* Generates the highlighted segments of the text based on the provided keywords.
* If no keywords are provided, the entire text is treated as unhighlighted.
*/
generateHighlightedSegments(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TextHighlightComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TextHighlightComponent, "ng-text-highlight", never, { "fullText": { "alias": "fullText"; "required": false; }; "keywords": { "alias": "keywords"; "required": false; }; "caseSensitive": { "alias": "caseSensitive"; "required": false; }; "highlightClass": { "alias": "highlightClass"; "required": false; }; "highlightStyle": { "alias": "highlightStyle"; "required": false; }; }, {}, never, never, true, never>;
}