Use Angular Value Input: Split Array List into Separate Items using New Line Character

Question

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

Define "doesn't work". If you want to show linebreaks in HTML you need to use <br /> tags. Consecutive whitespace is ignored; that's just how HTML and browsers work. — Dave Newton
– Dave Newton, Commented Jun 15, 2020 at 22:17
you have to replace \n for <br /> 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
– ncubica, Commented Jun 15, 2020 at 22:22
It can; it's generally the wrong approach. If it works for your usecase, great. — Dave Newton
– Dave Newton, Commented Jun 15, 2020 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
– Dave Newton, Commented Jun 15, 2020 at 22:44

user13431554 · Accepted Answer · 2020-06-15 22:40:14Z

1

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

HTML:

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

CSS:

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

answered Jun 15, 2020 at 22:40

user13431554

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

Collectives™ on Stack Overflow

Use Angular Value Input: Split Array List into Separate Items using New Line Character

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related