Replace \n with tag angular 6

Question

I have a REST API with \\n as backslash tags, can angular 6 replace these with
tags?

Here\'s my code:

{{x.deskrips         


        

Answer 1

You can use a pipe for the same:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
transform(value: string): string {
      return value.replace(/\n/g, '<br/>');
   }
}

The pipe must be included in your @NgModule declarations to be included in the app. To show the HTML in your template you can use the binding innerHTML.

<p [innerHTML]="x.deskripsi | replaceLineBreaks"></p>

Answer 2

You don't need a library. Simply set the white-space property of your tag to pre-wrap (or use a <pre> tag that should have this style by default)

document.querySelector('#formatted').innerText = 'Lorem\nIpsum';

#formatted {
  white-space: pre-wrap;
}

<div id="formatted"></div>
<div>Lorem\nIpsum</div>