Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork8
A text diff component library for Angular
License
AXeL-dev/ngx-diff2html
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A simple text diff component for Angular, based ondiff-match-patch &diff2html.
npm install --save ngx-diff2html1. Register theNgxDiff2htmlModule in a module, for example app module:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';+ import { NgxDiff2htmlModule } from 'ngx-diff2html'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule,+ NgxDiff2htmlModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}2. Import diff2html css instyles.css:
/* You can add global styles to this file, and also import other style files */+ @import "~diff2html/bundles/css/diff2html.min.css";3. You may also need to add the following lines topolyfills.ts:
// Add global to window, assigning the value of window itself.+ (window as any).global = window;+ (window as any).process = { env: { DEBUG: undefined } };
4. Start using the component:
<ngx-diff2htmlleft="some text"right="some other text"></ngx-diff2html>
- module:
NgxDiff2htmlModule - service:
NgxDiff2htmlService - component:
NgxDiff2htmlComponent - selector:
ngx-diff2html
| Input | Type | Required | Description |
|---|---|---|---|
| left | string | Yes | First text to be compared |
| right | string | Yes | Second text to be compared |
| filename | string | Optional, default: '' (empty) | Can be used to display a filename at the top of diff results |
| format | DiffFormat | Optional, default:side-by-side | Possible values: - side-by-side- line-by-line |
| style | DiffStyle | Optional, default:word | Possible values: - word- char |
| showContext | boolean | Optional, default:false | Enable to show context lines |
| Output | Type | Required | Description |
|---|---|---|---|
| diffChange | string | Optional | Event fired when diff changes. Returns text diff inunified format |
Get text diff betweentext1 &text2 inunified format.
Returns:
stringdiff
Convert unified diff string to HTML using diff2html.
Returns:
stringHTML diff
import{Component}from'@angular/core';import{NgxDiff2htmlService}from'ngx-diff2html';@Component({selector:'app-root',template:`<div [innerHtml]="diffHTML"></div>`,styles:[],providers:[NgxDiff2htmlService]})exportclassAppComponent{diffHTML:string=null;constructor(privatediffService:NgxDiff2htmlService){constdiff=this.diffService.getDiff('first text','second text');this.diffHTML=this.diffService.diffToHTML(diff);}}
Runng build ngx-diff2html to build the project. The build artifacts will be stored in thedist/ directory.
After building your library withng build ngx-diff2html, go to the dist foldercd dist/ngx-diff2html and runnpm publish.
This project is licensed under theMIT license.
About
A text diff component library for Angular
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.