angular - create a new line on HTML

Question

I have a simple question (I hope this). I have a service that return a string as result. The format is something like this:

" Test1: the association has been accepted.\nTest2: the association has been accepted.\n" "

On the client side (I'm using Angular 1.5.x) I put that string into a object (say the variable $scope.alert.message). After that I want to print that string in a modal. My html is:

<script type="text/ng-template" id="infoTemplate.html">
    <div class="modal-header left" ng-class="['div-' + alert.type, closeable ? 'alert-dismissible' : null]">
        <h3 class="modal-title" id="modal-title">Info</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <img class="imm-info" ng-class="['imm-' + alert.type, closeable ? 'alert-dismissible' : null]" />
        <p class="col-sm-10 col-sm-offset-2">{{alert.message}}</p><button class="col-sm-3 col-sm-offset-5 btn " ng-class="['button-' + alert.type, closeable ? 'alert-dismissible' : null]" ng-click="cancel()">OK</button>
    </div>
</script>

You can see the '{{alert.message}}'. My problem is that my message "doesn't display" the character '\n'. So it doesn't create more than one line. An example here:

example

Answer 1

Try this in HTML:

<pre>{{ alert.message }}</pre>

Already answered here:

The < pre > wrapper will print text with \n as text

Answer 2

I use the white-space: pre-wrap CSS style, e.g. :

<p style="white-space: pre-wrap">{{alert.message}}</p>

Answer 3

\n is not interpreted in html. You need to replace these instances with <br/> elements. You could for example replace them with a regex if you do not want to change the original string.

Answer 4

You can write a function where you take the alert-message and split it by "\n" than iterate trough it via *ngFor.

For example:

<p *ngFor="let msg of getMessageSplitted(alert.message)">{{msg}}</p>