{"id":13808923,"url":"https://github.com/rars/ngx-diff","last_synced_at":"2025-04-12T20:52:22.879Z","repository":{"id":28651402,"uuid":"115955865","full_name":"rars/ngx-diff","owner":"rars","description":"Angular component library for displaying diffs of text.","archived":false,"fork":false,"pushed_at":"2024-12-06T10:34:17.000Z","size":9954,"stargazers_count":33,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T20:52:16.528Z","etag":null,"topics":["angular","diff"],"latest_commit_sha":null,"homepage":"","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/rars.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":"2018-01-01T23:34:20.000Z","updated_at":"2025-03-11T02:37:19.000Z","dependencies_parsed_at":"2023-02-18T15:02:20.952Z","dependency_job_id":"438d026f-77ac-47d1-9f37-3d419a08562b","html_url":"https://github.com/rars/ngx-diff","commit_stats":{"total_commits":48,"total_committers":2,"mean_commits":24.0,"dds":0.08333333333333337,"last_synced_commit":"035bc5acd09ba5952a7475ab3b9436da8ae71be5"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rars%2Fngx-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rars%2Fngx-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rars%2Fngx-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rars%2Fngx-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rars","download_url":"https://codeload.github.com/rars/ngx-diff/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631728,"owners_count":21136560,"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","diff"],"created_at":"2024-08-04T01:01:55.178Z","updated_at":"2025-04-12T20:52:22.865Z","avatar_url":"https://github.com/rars.png","language":"TypeScript","readme":"# ngx-diff\n\n[![Node.js CI](https://github.com/rars/ngx-diff/actions/workflows/node.js.yml/badge.svg)](https://github.com/rars/ngx-diff/actions/workflows/node.js.yml)\n\nAngular component library for displaying diffs of text. [Demo](https://rars.github.io/ngx-diff/).\n\n## Quickstart\n\n1. Install `ngx-diff` modules from npm:\n   ```bash\n   npm install ngx-diff diff-match-patch-ts --save\n   ```\n2. Either:\n\n   2.1. If you are using this component in an NgModule-based setting, add `UnifiedDiffComponent` or `SideBySideDiffComponent` to your module's `imports`:\n\n   ```typescript\n   import { UnifiedDiffComponent } from 'ngx-diff';\n\n   import { NgModule } from '@angular/core';\n   import { BrowserModule } from '@angular/platform-browser';\n\n   import { AppComponent } from './app.component';\n\n   @NgModule({\n     declarations: [AppComponent],\n     imports: [BrowserModule, UnifiedDiffComponent],\n     providers: [],\n     bootstrap: [AppComponent],\n   })\n   export class AppModule {}\n   ```\n\n   2.2. Or if you are using this component in a standalone component setting, add `UnifiedDiffComponent` or `SideBySideDiffComponent` to your component's `imports`:\n\n   ```typescript\n   import { SideBySideDiffComponent } from 'ngx-diff';\n\n   import { Component } from '@angular/core';\n\n   @Component({\n     selector: 'app-root',\n     templateUrl: './app.component.html',\n     styleUrls: ['./app.component.scss'],\n     standalone: true,\n     imports: [SideBySideDiffComponent],\n   })\n   export class AppComponent {\n     // ...\n   }\n   ```\n\n3. Use the `ngx-unified-diff` component by setting the `before` and `after` attributes:\n\n   ```HTML\n   \u003cngx-unified-diff [before]=\"oldDocumentContents\" [after]=\"newDocumentContents\" [lineContextSize]=\"4\" /\u003e\n   ```\n\n   or use the `ngx-side-by-side-diff` component by setting the `before` and `after` attributes:\n\n   ```HTML\n   \u003cngx-side-by-side-diff [before]=\"oldDocumentContents\" [after]=\"newDocumentContents\" [lineContextSize]=\"4\" /\u003e\n   ```\n\n### Upgrading from v7.0.0\n\nIn v8.0.0, `inline-diff` component has been deprecated and users should switch to the `ngx-unified-diff` component that has been added and provides equivalent functionality. `inline-diff` will be removed in the next release.\n\n## Theming\n\nFor version 3+, you can customise the appearance of the diff through various CSS variable settings. If you are not using the latest version, refer to the `README.md` file in earlier releases.\n\nIn version 8.0.0, a light and dark theme was introduced. This should be imported to your application `styles.scss` file or equivalent.\n\n```scss\n@use 'ngx-diff/styles/default-theme';\n```\n\nYou can then use the provided `ngx-diff-light-theme` or `ngx-diff-dark-theme` classes.\n\n### Custom theme\n\nTo create your own theme, override the relevant CSS variables; for example, in your `styles.scss` file, define:\n\n```SCSS\n.my-custom-ngx-diff-theme {\n  --ngx-diff-border-color: #dfdfdf;\n  --ngx-diff-font-size: 0.9rem;\n  --ngx-diff-font-family: Consolas, Courier, monospace;\n  --ngx-diff-font-color: #000;\n  --ngx-diff-line-number-font-color: #aaaaaa;\n  --ngx-diff-line-number-hover-font-color:  #484848;\n\n  --ngx-diff-selected-border-width: 0;\n  --ngx-diff-selected-border-color: #000;\n  --ngx-diff-selected-line-background-color: #d6f1ff;\n\n  --ngx-diff-line-number-width: 2rem;\n  --ngx-diff-border-width: 1px;\n  --ngx-diff-line-left-padding: 1rem;\n  --ngx-diff-bottom-spacer-height: 1rem;\n  --ngx-diff-title-bar-padding: 0.5rem;\n  --ngx-diff-title-font-weight: 600;\n\n  --ngx-diff-insert-color: #d6ffd6;\n  --ngx-diff-delete-color: #ffd6d6;\n  --ngx-diff-equal-color: #ffffff;\n  --ngx-diff-mix-color: #000;\n  --ngx-diff-light-mix-percentage: 4%;\n  --ngx-diff-heavy-mix-percentage: 10%;\n}\n```\n\nThen use this class in your desired component in your HTML template:\n\n```HTML\n\u003cngx-unified-diff\n  class=\"ngx-diff-light-theme my-custom-ngx-diff-theme\"\n  [title]=\"filename\"\n  [before]=\"oldText\"\n  [after]=\"newText\"\n  [lineContextSize]=\"4\"\n  style=\"width: 100%\"\n  (selectedLineChange)=\"selectedLineChange($event)\" /\u003e\n```\n\nIt is recommended to use these settings rather than attempt to override styles based upon DOM structure or class names that are internal details that may change.\n\n## Version history\n\n| Angular Version | ngx-diff Version |\n| --------------- | ---------------- |\n| 9               | 0.2.0            |\n| 10              | 0.3.0            |\n| 11              | 0.4.0            |\n| 13              | 1.0.0            |\n| 14              | 2.0.0            |\n| 14              | 3.0.0            |\n| 15              | 4.0.0            |\n| 16              | 5.0.0            |\n| 17              | 6.0.0+           |\n| 18              | 9.0.0+           |\n| 19              | 10.0.0+          |\n\n## Contributions welcome!\n\nIf you have a feature or improvement you would like to see included, please raise an issue or a PR and I will review.\n\n## License\n\nSee the [LICENSE](LICENSE) file for license rights and limitations (MIT).\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Viewers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frars%2Fngx-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frars%2Fngx-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frars%2Fngx-diff/lists"}