npmpackage.info

Gathering detailed insights and metrics for ngx-diff2html

Other packages similar to ngx-diff2html

@mcarey1590/ngx-diff2html

1.0.0

A text diff component library for Angular.

diff2html

3.4.48

Fast Diff to colorized HTML

diff2html-cli

5.2.15

Fast Diff to colorized HTML

@ngx-translate/core

16.0.3

Translation library (i18n) for Angular

Gathering detailed insights and metrics for ngx-diff2html

ngx-diff2html

A text diff component library for Angular

0.1.3

MIT

TypeScript

32,400 3.4

Installations

npm install ngx-diff2html

Pull Requests

Open

14

Total

40

Closed

2

Merged

24

Issues

Open

1

Total

2

Closed

1

Releases

v0.1.3

Published on 07 Jan 2021

v0.1.2

Published on 22 Mar 2020

View all 2 releases

Developer

AXeL-dev

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

12.20.0

NPM Version

6.14.8 Statistics

5 Stars

106 Commits

6 Forks

3 Watching

15 Branches

2 Contributors

Updated on 19 Aug 2024

Languages

TypeScript (72.58%)

JavaScript (13.44%)

HTML (10.41%)

CSS (3.58%)

Total Downloads

Cumulative downloads

Total Downloads

32,400

Last day

64.8%

Compared to previous day

Last week

112.1%

492

Compared to previous week

Last month

-39%

1,577

Compared to previous month

Last year

284.3%

19,719

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

diff-match-patch diff2html path tslib

Peer Dependencies

@angular/common @angular/core

Versions

NgxDiff2html

A simple text diff component for Angular, based on diff-match-patch & diff2html.

Demo

ngx-diff2html Demo

Installation

npm install --save ngx-diff2html

Usage

1. Register the NgxDiff2htmlModule in a module, for example app module:

1  import { BrowserModule } from '@angular/platform-browser';
2  import { NgModule } from '@angular/core';
3
4  import { AppComponent } from './app.component';
5+ import { NgxDiff2htmlModule } from 'ngx-diff2html';
6
7  @NgModule({
8    declarations: [AppComponent],
9    imports: [
10      BrowserModule,
11+     NgxDiff2htmlModule
12    ],
13    providers: [],
14    bootstrap: [AppComponent]
15  })
16  export class AppModule {}

2. Import diff2html css in styles.css:

1  /* You can add global styles to this file, and also import other style files */
2+ @import "~diff2html/bundles/css/diff2html.min.css";

3. You may also need to add the following lines to polyfills.ts:

1  // Add global to window, assigning the value of window itself.
2+ (window as any).global = window;
3+ (window as any).process = { env: { DEBUG: undefined } };

4. Start using the component:

1<ngx-diff2html
2  left="some text"
3  right="some other text"
4></ngx-diff2html>

API

module: NgxDiff2htmlModule
service: NgxDiff2htmlService
component: NgxDiff2htmlComponent
selector: ngx-diff2html

Inputs

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

Outputs

Output	Type	Required	Description
diffChange	string	Optional	Event fired when diff changes. Returns text diff in unified format

Methods

`NgxDiff2htmlService.getDiff(text1, text2, filename)`

Get text diff between text1 & text2 in unified format.

Returns:

string diff

`NgxDiff2htmlService.diffToHTML(diff, format, style)`

Convert unified diff string to HTML using diff2html.

Returns:

string HTML diff

Example:

1import { Component } from '@angular/core';
2import { NgxDiff2htmlService } from 'ngx-diff2html';
3
4@Component({
5  selector: 'app-root',
6  template: `<div [innerHtml]="diffHTML"></div>`,
7  styles: [],
8  providers: [
9    NgxDiff2htmlService
10  ]
11})
12export class AppComponent {
13
14  diffHTML: string = null;
15
16  constructor(private diffService: NgxDiff2htmlService) {
17    const diff = this.diffService.getDiff('first text', 'second text');
18    this.diffHTML = this.diffService.diffToHTML(diff);
19  }
20
21}

Build

Run ng build ngx-diff2html to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-diff2html, go to the dist folder cd dist/ngx-diff2html and run npm publish.

License

This project is licensed under the MIT license.

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

79 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-36fh-84j7-cv5h
Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4fc4-chg7-h8gh
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

3.4

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More