put new line in string to translate

Question

I'm using ngx-translate.

How can I put a line break in a string to translate ?

In my template I have :

{{'STRING_TO_TRANSLATE' | translate}}

In my en.json:

{
"STRING_TO_TRANSLATE": "text on first line. <br> or \n don't work. Text on second line"
}

Answer 1

You can use \n but you will have to provide some styling.

So in your template use this:

<div class="my-translated-paragraph">
    {{'STRING_TO_TRANSLATE' | translate}}
</div>

Your en.json:

{
"STRING_TO_TRANSLATE": "text on first line.\nText on second line"
}

Your (s)CSS file:

.my-translated-paragraph{
    white-space: pre-wrap;
}

More info an the magic behind white-space: https://stackoverflow.com/a/42354356/3757110

See also a github Issue about this: https://github.com/angular-translate/angular-translate/issues/595

Answer 2

It works! But instead of

{{'STRING_TO_TRANSLATE' | translate}}

You should do

<div [innerHTML]="'STRING_TO_TRANSLATE' | translate"></div>

<br/>s should work just fine, but in other cases you may need some additional 'safe html pipe', i.e:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'mySafeHtmlPipe'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  public transform(htmlContent) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlContent);
  }
}

Answer 3

This case can be solved one way or another, but IMHO the real solution, without any dirty tricks is:

.container {
    white-space: pre-line;
}

There is a significant difference between pre-wrap and pre-line. The pre-wrap will result in the browser preserving all the whitespaces and so you will get the first line indentation. The pre-line will collapse our whitespace sequence into a single whitespace and no indentation will occur.

You can read more on that in the MDN docs, actual link below:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Answer 4

If you want <p></p> for \n\n and <br /> for \n, here's my solution:

Step 1: Do as I say in this comment

Step 2: Chain your pipes likes this:

<div [innerHTML]="'YOUR_TRANSLATE_WITH_\n_OR_\n\n_GOES_HERE' | translate | nl2pbr"></div>

More information about chaining pipes here: https://angular.io/guide/pipes#chaining-pipes