Rendering newline character as a string in Angular

Question

I've looked into this quite a bit and all I'm seeing are solutions on how to show the newline character as a new line.

I want to show the "\n" as a string in an Angular view. It seems that Angular ignores it by default.

Example Text:

this.myText = "This is my \n example \n string: \n"

Example Output of <div>{{ myText }}</div>:

"This is my example string:"

Desired Output:

"This is my \n example \n string: \n"

Stackblitz: HERE

--

i.e. style="white-space: pre-line" or <pre></pre> or [innerText]="myText" is not what I want to do as I do not want to render the \n as a new line.

Thanks for the help!

dave · Accepted Answer · 2021-09-02 19:05:33Z

3

You just need to make it {{ myText.split('\n').join('\\n') }}

https://stackblitz.com/edit/angular-ivy-ujcazi?file=src/app/app.component.html

answered Sep 2, 2021 at 19:05

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle · Accepted Answer · 2021-09-03 16:49:08Z

1

An alternative solution that seems more of an "Angular way" to do it would be to create a pipe for it:

.ts:

import { Pipe, PipeTransform } from '@angular/core';

/*
 * Returns the newline character "\n" as a string
 *
 */
@Pipe({ name: 'newlineAsString' })
export class NewlineAsStringPipe implements PipeTransform {
  
  constructor() {}

  transform(text: string) {
    return text.split('\n').join('\\n');
  }
}

.html:

<div>{{ myText | newlineAsString }}</div>

answered Sep 3, 2021 at 16:49

Kyle

6,5276 gold badges44 silver badges56 bronze badges

Collectives™ on Stack Overflow

Rendering newline character as a string in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related