Skip to content

Multi-keywords highlighter library for angular applications. This workspace could also be used as reference for build an angular library with integration of NX, Angular, Verdaccio, Playwright, BDD

License

Notifications You must be signed in to change notification settings

dylannnn/ngx-multi-keywords-highlighter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ngx Multi Keywords Highlighter Workspace

MIT license npm (scoped) GitHub code size in bytes Commitizen friendly Publish NGX Multi Keywords Highlighter

Project Overview

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.

NGX Multi Keywords Highlighter

Features

  • 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.

Getting Started

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 your angular.json or project.json if you use NX to the build options of styles.
  • Generate Material 3 theme: nx generate @angular/material:m3-theme
  1. Import the NgxMultiKeywordsHighlighterModule to your app.module.ts

    import { LABEL_POSITION, MATERIAL_COLOR, NgxMultiKeywordsHighlighterModule } from '@amfrontender/ngx-multi-keywords-highlighter';
  2. Add NgxMultiKeywordsHighlighterModule 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: [...],
    })
    export class AppModule {}
  3. Add the lib tag to your component html

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

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

Development/Contribution

TBD

Semantic Commits

Type Notes
build Changes that affect the build system or external dependencies
chore Changes to the build process, release or auxiliary tools and libraries such as documentation generation
ci Changes to our CI configuration files and scripts
docs Documentation only changes
feat A new feature
fix A bug fix
perf A code change that improves performance
refactor A refactoring
revert A revert commit
style UI/UX CHANGES
test Adding missing tests

License

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

Contact

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.

About

Multi-keywords highlighter library for angular applications. This workspace could also be used as reference for build an angular library with integration of NX, Angular, Verdaccio, Playwright, BDD

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published