Ionic4 show Text with line breaks

user_10647006 0
Viewed 5216

I want that the user can insert a text in an input field with multiple lines with the enter key. Then I want so save the text in a string and then send it to the backend. On the Detail-Page of the app I want to show the inserted text but with line breaks.

In the html file for the Input I tried this

<div>
    <ion-item>
          <ion-textarea rows="5" name="description" type="text" 
               placeholder="Description" [(ngModel)]="description" required>
          </ion-textarea>
    </ion-item>
</div>

In the .ts I encode the string of description 

 this.description = encodeURI(this.description);

But when I want to show the inserted Text in the other html File

<ion-col size="12">
    <div class="idea-description">
      <ion-text style = "white-space: pre-wrap;">{{ idea.description }}</ion-text>
    </div>

it only shows the encoded text but there are no line breaks.

ionic4 ionic-framework css javascript
1 Answers

I found the answer in another post, so I wanted to share here in case you hadn't found it yet.

\n will show as a line break if you apply below style to the element:

white-space: pre-wrap

I added this to the element, and the data now shows with the line breaks in my <ion-text> element.

<ion-card-content class="" style="padding-top:0; white-space: pre-wrap;">
            <ion-text [innerHtml]="notification.content"></ion-text>
</ion-card-content>
user_10260380
Related