2

I have the following front code:

<p>{{ news.content }}</p>

news.content is stored in my firebase DB.

How can I render a new line in this text interpolation without modifying my front code (nor HTML nor CSS)? I will eventually change my front code if needed but I need I quick backend fix because my app is in prod and I cannot not provide an update within the day...

So I tried \n, <br /> and &#13;&#10; but none is working...

When I inspect the view, HTML is as follows:

<p>"my text"</p>

So I guess the pain point comes from the double quotes...

Just for you to know, I need this to work on the iOS build.

Manuel RODRIGUEZ
  • 2,131
  • 3
  • 25
  • 53

1 Answers1

4

If I understood, you want to be able to render a new line, thanks to the object you gor from your component.

So I think you shoud use [innerHTML] of Angular and the <br> tag (https://angular.io/guide/template-syntax#!#property-binding-or-interpolation-) :

app.component.ts

export class AppComponent{
    sometext = 'some text';
    anothertext = '<br>new line here';
   ...
}

app.component.html

<p>{{sometext}} and <span [innerHTML]="anothertext"></span></p>
br.julien
  • 3,420
  • 2
  • 23
  • 44
  • Indeed that's a good solution but I am not able to change my front-end code right now... I mean I have to submit an update to Apple and it will take 24-48h but I need to fix it for today. So I was wondering if there is any special character that would make the trick meanwhile... As text is the only element that I can modify right now... – Manuel RODRIGUEZ Nov 17 '17 at 09:51
  • Is there an id to your html element, or a way to identify it ? – br.julien Nov 17 '17 at 10:32
  • No no id. What was your thought ? – Manuel RODRIGUEZ Nov 17 '17 at 10:57
  • Maybe with some javascript code you could have done it by getting the element : https://stackoverflow.com/questions/15357846/how-to-force-a-line-break-on-a-javascript-concatenated-string – br.julien Nov 17 '17 at 12:51