ngx-diff
Angular component library for displaying diffs of text. Demo.
Quickstart
- Install
ngx-diffmodules from npm:
```
npm install ngx-diff diff-match-patch-ts --save
```- Either:
2.1. If you are using this component in an NgModule-based setting, add `InlineDiffComponent` to your module's `imports`:
```typescript
import { InlineDiffComponent } from 'ngx-diff';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, InlineDiffComponent],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2.2. Or if you are using this component in a standalone component setting, add `InlineDiffComponent` to your component's `imports`:
```typescript
import { InlineDiffComponent } from 'ngx-diff';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
imports: [InlineDiffComponent],
})
export class AppComponent {
// ...
}
```- Use the
inline-diffcomponent by setting theoldTextandnewTextattributes:
```HTML
<inline-diff [oldText]="oldDocumentContents" [newText]="newDocumentContents" [lineContextSize]="4" />
```Theming
For version 3+, you can customise the appearance of the diff through various CSS variable settings. For example, in yourstyles.scss file, define::root .my-custom-ngx-diff-theme {
--ngx-diff-border-color: #888888;
--ngx-diff-font-size: 1rem;
--ngx-diff-font-family: Consolas, Courier, monospace;
--ngx-diff-font-color: #000000;
--ngx-diff-line-number-font-color: #484848;
--ngx-diff-line-number-hover-font-color: #ffffff;
--ngx-diff-selected-border-color: #ff8000;
--ngx-diff-inserted-background-color: #9dff97;
--ngx-diff-deleted-background-color: #ff8c8c;
--ngx-diff-equal-background-color: #ffffff;
--ngx-diff-margin-background-color: #dedede;
--ngx-diff-line-number-width: 2rem;
--ngx-diff-border-width: 1px;
--ngx-diff-line-left-padding: 1rem;
--ngx-diff-bottom-spacer-height: 1rem;
}Then use this class in your desired component in your HTML template:
<inline-diff
class="my-custom-ngx-diff-theme"
[oldText]="oldText"
[newText]="newText"
[lineContextSize]="4"
style="width: 100%"
(selectedLineChange)="selectedLineChange($event)" />It 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.
