{"id":26084894,"url":"https://github.com/philenius/ngx-annotate-text","last_synced_at":"2026-03-08T19:08:07.796Z","repository":{"id":41845902,"uuid":"338798094","full_name":"philenius/ngx-annotate-text","owner":"philenius","description":"An Angular component library for interactively highlighting / annotating parts of text.","archived":false,"fork":false,"pushed_at":"2024-05-13T22:29:28.000Z","size":1818,"stargazers_count":13,"open_issues_count":7,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-01T23:03:30.330Z","etag":null,"topics":["angular","angular-component","annotate","annotate-documents","annotate-text","entities","mark-entities","nlp","pos-tagging","typescript-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-annotate-text","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/philenius.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-14T12:14:52.000Z","updated_at":"2024-12-03T22:08:17.000Z","dependencies_parsed_at":"2024-05-02T11:57:44.395Z","dependency_job_id":"2e2a6c76-5726-49e6-9aaf-24e086230e07","html_url":"https://github.com/philenius/ngx-annotate-text","commit_stats":{"total_commits":79,"total_committers":3,"mean_commits":"26.333333333333332","dds":0.05063291139240511,"last_synced_commit":"87334493ebba8f4e9baa3d4408247c5e8d7144f1"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philenius%2Fngx-annotate-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philenius%2Fngx-annotate-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philenius%2Fngx-annotate-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/philenius%2Fngx-annotate-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/philenius","download_url":"https://codeload.github.com/philenius/ngx-annotate-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242123249,"owners_count":20075344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-component","annotate","annotate-documents","annotate-text","entities","mark-entities","nlp","pos-tagging","typescript-library"],"created_at":"2025-03-09T05:01:20.700Z","updated_at":"2026-03-08T19:08:07.788Z","avatar_url":"https://github.com/philenius.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Mar 09, 2025](/content/2025/03/09/README.md)","DOM"],"readme":"# ngx-annotate-text\n\n\u003cimg alt=\"GitHub Workflow Status (branch)\" src=\"https://img.shields.io/github/actions/workflow/status/philenius/ngx-annotate-text/main.yml?branch=main\u0026style=for-the-badge\"\u003e \u003ca href=\"https://github.com/philenius/ngx-annotate-text/issues\"\u003e\u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/philenius/ngx-annotate-text?style=for-the-badge\"\u003e\u003c/a\u003e \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/philenius/ngx-annotate-text?style=for-the-badge\"\u003e \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/ngx-annotate-text?style=for-the-badge\"\u003e\n\n[![Edit ngx-annotate-text demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ngx-annotate-text-demo-sgb4t1?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp%2Fapp.component.html\u0026theme=dark)\n\nThis Angular component library is perfect for tasks like visualizing named entity recognition, part of speech tagging, or annotating text datasets. It allows for interactively highlighting and annotating parts of text.\n\n![Screenshot](https://raw.githubusercontent.com/philenius/ngx-annotate-text/main/screenshot.png)\n\n## Features\n\n- 👆 Interactively mark text ranges such as sentences, words, or parts of words.\n- 🗑️ Easily remove existing annotations.\n- 🎉 Purely based on CSS, with no use of SVGs or canvas.\n- 🛠️ Customize annotation rendering with your own Angular components.\n\n## Demo\n\n[![Edit ngx-annotate-text demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ngx-annotate-text-demo-sgb4t1?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp%2Fapp.component.html\u0026theme=dark)\n\nView and edit the live demo Angular app on \u003ca href=\"https://codesandbox.io/s/ngx-annotate-text-demo-sgb4t1?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp%2Fapp.component.html\u0026theme=dark\"\u003ecodesandbox.io\u003c/a\u003e or look through the code of the demo app in [ngx-annotate-text/src/app/](https://github.com/philenius/ngx-annotate-text/tree/main/src/app).\n\n**Screen recording:**\n\n![Screen recording GIF](https://raw.githubusercontent.com/philenius/ngx-annotate-text/main/screen-recording.gif)\n\n## Usage\n\n1. Install the NPM package:\n\n   ```bash\n   npm install ngx-annotate-text\n   ```\n\n2. In your Angular component import the `NgxAnnotateTextComponent` and create two properties for the text to be displayed and the list of annotations:\n\n   ```typescript\n   import { Annotation, NgxAnnotateTextComponent } from 'ngx-annotate-text';\n\n   @Component({\n     selector: 'app-root',\n     imports: [NgxAnnotateTextComponent],\n     templateUrl: './app.component.html',\n     styleUrl: './app.component.css',\n   })\n   export class AppComponent {\n     annotations: Annotation[] = [\n       new Annotation(3, 11, 'Date', '#0d6efd'),\n       new Annotation(36, 45, 'City', '#dc3545'),\n       new Annotation(47, 52, 'Country', '#198754'),\n       new Annotation(77, 85, 'Time', '#6c757d'),\n     ];\n\n     text = 'On August 1, we went on vacation to Barcelona, Spain. Our flight took off at 11:00 am.';\n   }\n   ```\n\n3. Add the component `ngx-annotate-text` to your component's template:\n\n   ```html\n   \u003cngx-annotate-text\n     [(annotations)]=\"annotations\"\n     [removable]=\"true\"\n     [text]=\"text\"\n     annotationClass=\"my-annotation\"\n     #annotateText\n   \u003e\n   \u003c/ngx-annotate-text\u003e\n   ```\n\n3. Having set `annotationClass=\"my-annotation\"`, a custom CSS styling can be applied by combining `::ng-deep` with the class selector `.my-annotation`, e.g., to remove the border-radius:\n   ```css\n   ::ng-deep .my-annotation .annotation-parent,\n   ::ng-deep .my-annotation .annotation-content {\n     border-radius: 0rem !important;\n   }\n   ```\n\n## API - NgxAnnotateText\n\n### Inputs\n\n| Input                       | Description                                                  | Type               | Default value |\n| :-------------------------- | ------------------------------------------------------------ | ------------------ | :------------ |\n| annotations                 | Represents the parts of the given text which shall be annotated. | `Annotation[]`     | `[]`          |\n| annotationClass             | An optional CSS class applied to all elements which wrap the annotated parts of the given text. | `string\\|undefined` | `undefined`   |\n| annotationRendererComponent | An optional Angular component that shall be used for rendering the annotation. By default, it uses the provided `NgxAnnotationRendererComponent`. You can implement your own annotation rendering component to customize the visualization of annotations. The custom component must implement the interface `NgxAnnotationRendererComponentInterface`. | `NgxAnnotationRendererComponentInterface` | `NgxAnnotationRendererComponent` |\n| removable                   | Determines whether annotations shall have a small button in the top right corner so that the user can remove an annotation. | `boolean`          | `true`        |\n| text                        | The text which shall be displayed and annotated.             | `string`           | empty string  |\n\n### Outputs\n\n| Output            | Description                                                                                                             | Type                         |\n| ----------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| annotationsChange | Emits the list of existing annotations after an element has been removed by the user.                                   | `EventEmitter\u003cAnnotation[]\u003e` |\n| clickAnnotation   | Emits the selected annotation when the user clicks on an annotation's box, the label or text.                           | `EventEmitter\u003cAnnotation\u003e`   |\n| removeAnnotation  | Emits the selected annotation when the user removes it by clicking the annotation's X button in the upper right corner. | `EventEmitter\u003cAnnotation\u003e`   |\n\n### Methods\n\n| Method                               | Description                                                  | Return type            |\n| ------------------------------------ | ------------------------------------------------------------ | ---------------------- |\n| getCurrentTextSelection              | Returns the start index and end index of the currently selected text range. Returns `undefined` if no text is currently selected. | `ISelection|undefined` |\n| isOverlappingWithExistingAnnotations | Returns true if the given text selection is (partially) overlapping with an existing annotation. Returns false otherwise. | `boolean`              |\n\n---\n\n## Development\n\n### Recreate project from scratch\n\n```bash\nnpm install -g @angular/cli@^21\nng new ngx-annotate-text-workspace\ncd ngx-annotate-text-workspace/\nng generate library ngx-annotate-text\nng add angular-eslint@^21\nng g angular-eslint:add-eslint-to-project ngx-annotate-text-workspace\nng g angular-eslint:add-eslint-to-project ngx-annotate-text\nnpm install prettier --save-dev\nng build ngx-annotate-text\nng lint\nng test ngx-annotate-text\n```\n\n### Build\n\nRun `ng build ngx-annotate-text` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n### Running the demo app\n\nRun `ng serve --open` to start the demo app in your browser.\n\n### Running linting tools\n\nRun `ng lint` to execute ESLint.\n\n### Running unit tests\n\nRun `ng test --watch=true --coverage --ui ngx-annotate-text` to execute the unit tests via Vitest.\n\n### Publish library as an npm package\n\n:warning: Don't manually publish to npmjs.org, there is a pipeline that runs automatically when a new release is created.\n\n```bash\nng build ngx-annotate-text --configuration production\ncd dist/ngx-annotate-text\nnpm publish\n```\n\n### Development server\n\nBuild the library in watch mode:\n\n```bash\nng build ngx-annotate-text --watch\n```\n\nRun the Angular dev server:\n\n```bash\nng serve --open\n```\n\nNavigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilenius%2Fngx-annotate-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphilenius%2Fngx-annotate-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphilenius%2Fngx-annotate-text/lists"}