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

Output

An example output of a diff is shown below.

!alt tag

Usage

View

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

``

html





    

        

        Angular htmldiff demo

        



        

        

        



        



        

    

    

        Before

        

            This is an example

            This is another example

        



        After

        

            This is modified

            This is also modified

            This is added

        



        Diff





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));

});