Repository files navigation

Bored with the browser build-in search that hightlight the keyword? Missing a feature that highlight multiple keywords? This is the Ngx Multi Keywords Highlighter! This library provides a simple and intuitive way to highlight multiple keywords with different colors in your Angular applications. This library is designed to be easy to integrate into your existing projects, allowing you to focus on building amazing features without worrying about the underlying implementation details.

• Multi-keyword highlighting: Highlight multiple keywords in your text content using a variety of colors.
• Customizable colors: Choose from a range of pre-defined colors or define your own custom colors to match your application's branding.
• Easy integration: Simply install and import the library into your Angular project, and you're ready to start highlighting!
• Flexibility: Supports customization for multiple keywords highlight colors, thems.

To get started with this project, follow these steps:

• Install the library using npm or yarn:npm install @amfrontender/ngx-multi-keywords-highlighter
• Import the library and config for your Angular project:

1. Add"node_modules/@amfrontender/ngx-multi-keywords-highlighter/themes/index.scss" or"node_modules/@amfrontender/ngx-multi-keywords-highlighter/themes/themes.scss" to yourangular.json orproject.json if you use NX to the build options of styles.

• Generate Material 3 theme:nx generate @angular/material:m3-theme

2. Import theNgxMultiKeywordsHighlighterModule to yourapp.module.ts

   import{LABEL_POSITION,MATERIAL_COLOR,NgxMultiKeywordsHighlighterModule}from'@amfrontender/ngx-multi-keywords-highlighter';

3. AddNgxMultiKeywordsHighlighterModule config to the imports

   @NgModule({declarations:[...],providers:[provideAnimations(),importProvidersFrom(NgxMultiKeywordsHighlighterModule.forRoot({themeColor:MATERIAL_COLOR.PRIMARY,enableToggleLabel:true,toggleLabelPosition:LABEL_POSITION.BEFORE,enableHighlighterTooltip:'On/Off',linkToCopyright:true,minWidth:320,appRoot:storyRoot,}),),],bootstrap:[...],})exportclassAppModule{}

4. Add the lib tag to your component html

   <mkh-multi-keywords-highlighterclass="custom-lib"></mkh-multi-keywords-highlighter>

For more advanced usages, please check the storybook for the library or the demo app

TBD

The Library is released under the MIT License. SeeLICENSE for more information.

If you have any questions, need help with integration, or want to discuss new features, please don't hesitate to open an Issue from github repository.