angular-htmldiff

			Stars	Issues	Version	Updated	Created	Size
	angular-htmldiff		0	3	1.2.2	5 years ago	6 years ago

Angular htmldiff

A simple angular wrapper for htmldiff.js, which allows you to generate the diff between two pieces of html.

Installation

bower install angular-htmldiff --save

npm install angular-htmldiff --save

An example output of a diff is shown below. alt tag

View Note that you can style the ins and del tags however you want. ```html

<head>

<meta charset="utf-8"/>

<title>Angular htmldiff demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/angular-htmldiff/src/htmldiff.js"></script>

<script src="bower_components/angular-htmldiff/src/angular-htmldiff.js"></script>

<script src="app.js"></script>

<style>

.html-viewer {

border: 1px solid black;

padding: 0px 10px;

width: 300px;

ins {

background-color: lightgreen;

padding: 3px;

del {

background-color: pink;

padding: 3px;

</style>

</head>

<body>

<h1>Before</h1>

<div class="html-viewer" id="before">

<p>This is an example</p>

<p>This is another example</p>

</div>

<h1>After</h1>

<div class="html-viewer" id="after">

<p>This is modified</p>

<p>This is also modified</p>

<p>This is added</p>

</div>

<h1>Diff</h1>

<div class="html-viewer" ng-bind-html="diff"></div>

</body>

``` Controller ```js angular.module('app', 'htmldiff'); angular.module('app').controller('AppCtrl', function($scope, $sce, htmldiff) {

const before = angular.element(document.querySelector('#before'))[0].innerHTML;

const after = angular.element(document.querySelector('#after'))[0].innerHTML;

$scope.diff = $sce.trustAsHtml(htmldiff(before, after));

}); ```