title: Angular - Render Markdown with \n
body: <p>I'm trying to render Markdown inside an Angular application. </p>
  
  <p>I was using <a href="https://github.com/jfcere/ngx-markdown" rel="nofollow noreferrer">ngx-markdown</a> with Angular 5 and it was working fine. </p>
  
  <p>However, I had to upgrade to Angular 8 and since then, the <code>\n</code> are not rendered anymore. I read that with Angular 6, white spaces are not preserved anymore and that could be the issue. </p>
  
  <p><a href="https://github.com/jfcere/ngx-markdown" rel="nofollow noreferrer">ngx-markdown</a> proposes a fix by adding the directive <code>ngPreserveWhitespaces</code> but it still doesn't work.</p>
  
  <p>I've tried another library, <a href="https://github.com/dimpu/ngx-md" rel="nofollow noreferrer">ngx-md</a>, but it also fails to render <code>\n</code></p>
  
  <p>With <a href="https://github.com/jfcere/ngx-markdown" rel="nofollow noreferrer">ngx-markdown</a>:</p>
  
  <pre><code>&lt;markdown ngPreserveWhitespaces &gt;
      # Title \n ## Subtitle
  &lt;/markdown&gt;
  </code></pre>
  
  <p>With <a href="https://github.com/dimpu/ngx-md" rel="nofollow noreferrer">ngx-md</a>:</p>
  
  <pre><code>&lt;ngx-md&gt;
    # Title \n ## Subtitle
  &lt;/ngx-md&gt;
  </code></pre>
  
  <p>They both render this:</p>
  
  <p><a href="https://i.stack.imgur.com/GrB0B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GrB0B.png" alt="enter image description here"></a></p>
  
  <p>I've also tried to do a .split('\n') and render the result using *ngFor, but the result is not perfect. Some block of text needs to be rendered at once, like code block.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Thanks to Andrei Tătar, I made little progress.</p>
  
  <p>Rendering the markdown like this works:</p>
  
  <pre><code>&lt;markdown ngPreserveWhitespaces &gt;
      # Title &amp;#x0a; ## Subtitle
  &lt;/markdown&gt;
  </code></pre>
  
  <p>But not like this: </p>
  
  <pre><code>const content = "# Title &amp;#x0a; ## Subtitle"
  
  &lt;markdown ngPreserveWhitespaces [data]="content" &gt;        
  &lt;/markdown&gt;
  </code></pre>
  
  <p>And that is sadly what I need</p>