HTML document preserve the new lines and spaces when using innerText

Question

I am new to webdevelopment. So, Here, I have textAngular. In this I a, showing html document. Now, I want to show the text of the document only but that should be with the formatting as it is in the .html file. So,Right now my code is like -

here data is the html file content, you can say it's a string which has the html file content.Now,

$scope.htmlOriginalDoc = parser.parseFromString(data, 'text/html');
$rootScope.data.htmlDocument = $scope.htmlOriginalDoc.body.innerText;

So, Here when I get this that time I am getting all the data of that file, but when I see it it is like just a text document it is not having any new lines,I mean its not preserving the new line or spaces .So, How can I achieve this ?

I think you are looking for compiling that html, try using `ng-html-bind="htmlOriginalDoc"` from [`ngSanitize`](https://docs.angularjs.org/api/ngSanitize) — Aleksey Solovey, Mar 20 '18 at 13:01
And Here I am using $rootScope.data.htmlDocument in the ng-model — ganesh kaspate, Mar 20 '18 at 13:09
it's usually a bad idea to [pollute your $rootScope](https://stackoverflow.com/questions/35345446/best-practice-for-using-rootscope-in-an-angularjs-application) (use $scope and share values with a service) — Aleksey Solovey, Mar 20 '18 at 13:11
if `ng-html-bind` doesn't work, try [`$sce`](https://docs.angularjs.org/api/ng/service/$sce#trustAsHtml), for example: `$sce.trustAsHtml(your_html)` (assign it to a scoped variable and then maybe try `ng-html-bind`). _Don't forget to add the ngSanitize script and inject the module and any used services_ — Aleksey Solovey, Mar 20 '18 at 13:14
Added this but still it is showing me the text content with the same format only — ganesh kaspate, Mar 20 '18 at 13:25

Aleksey Solovey · Answer 1 · 2018-03-20T13:59:25.760

Basically you need to compile it from string, then bind it with ngSanitize. To preserve the white space wrap with <pre> tags.

var app = angular.module('myApp', ['ngSanitize']);
app.controller('myCtrl', function($scope, $sce) {
  $scope.html = "<div style=\"color:red;font-size:24px;\">    T   e  s t    </div>"; // string
  $scope.html = $sce.trustAsHtml($scope.html);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div style="white-space: pre;"> <!-- instead of <pre> -->
    <div ng-bind-html="html"></div>
  </div>
</div>

HTML document preserve the new lines and spaces when using innerText

1 Answers1