0

I have a list of items. I am trying to split them with a delimiter. It is working with semicolons, but not working with newline characters. How can I fix this, to work with new line? Would like to show line breaks.

This works:

[value]="productList.join('; ')"

Does not work for 

[value]="productList.join('\n ')"
[value]="productList.join('\r ')"
[value]="productList.join('\n\r ')"

Currently using Angular 8 with Typescript.

Resource: JavaScript Newline Character

  • 4
    Define "doesn't work". If you want to show linebreaks in HTML you need to use `
    ` tags. Consecutive whitespace is ignored; that's just how HTML and browsers work.     – Dave Newton Jun 15 '20 at 22:17
  • you have to replace `\n` for `
    ` if you are using a textarea as an input and an HTML element as an output. This is not something related to angular is just how the web works.     – ncubica Jun 15 '20 at 22:22
  • It can; it's generally the wrong approach. If it works for your usecase, great. – Dave Newton Jun 15 '20 at 22:26
  • @AlanSmith5482 Because that will preserve *all* whitespace, which *may* be acceptable in some situations, but it's almost always better to use the appropriate tags. – Dave Newton Jun 15 '20 at 22:44

1 Answers1

1

It should be working, create a css class with white-space

HTML:

[value]="productList.join('\n ')"

CSS:

.test{
  white-space: pre !important;
}