problem showing the
text instead of breaking lines in angular6

Question

i have a text showing in the angular.

var text = 'The Zones We are Looking for a Reversal is6000<br><br>We Will Keep Close Eyes on it <br>But Keep in Mind That if We Break Below 6000 USD<br><br>Then This Time We Expect a Hard PullBack Towards 5250-5500 USD Levels<br><br>'

<div class="text">
  {{text}}
</div>

.text {
    word-wrap: break-word;
    line-height: 150%;
    white-space: pre-wrap;
}

why on the html it is still showing the '< br >' instead of the breaking lines?

Bind `innerHTML` property i.e. `
` there must be a duplicate for this issue — Satpal, Mar 05 '19 at 05:51

score 0 · Answer 1 · answered Mar 05 '19 at 05:53

0

Use ng-bind-html for binding with html elements too. ng-bind creates a text node. Refer for ng-bind-html You can also use the pre tag. It will automatically provide line breaks wherever specified

<div class="text">
  <pre>{{text}}</pre>
</div>

answered Mar 05 '19 at 05:53

ellipsis

12,049
2
17
33

problem showing the text instead of breaking lines in angular6

1 Answers1

problem showing the
text instead of breaking lines in angular6