Adding a new line into concat() string - Angular 4

Question

Using Angular 4 - the following snippet of code resides in my typescript file.

this.tabTitle = "Project Name: " + this.currentProjectRevision.ProjectInformation[0].ProjectName;

this grabs the value of the project name and concatenates it with Project name:

       this.tabTitle = this.tabTitle.concat('/n' + " Quote ID: " + this.quoteInformation.CurrentProjectCustomer.QuoteId);

The above code grabs the first line of codes values and concatenates it with Quote ID: and adds the value of the Quote ID.

When running this, the output is as follows. Project Name: test /n Quote ID: 0000001

The actual value stated above gets appended into the following code. Project Name: bvn xbn/n Quote ID: 1000016

I would like to have quote ID start on a new line. I have tried putting in <br/>, <br> as well as /n will no success. They are all being added as a string.

Code I have tried so far

this.tabTitle = this.tabTitle.concat('<br/>' + " Quote ID: " + this.quoteInformation.CurrentProjectCustomer.QuoteId);

this.tabTitle = this.tabTitle.concat('<br>' + " Quote ID: " + this.quoteInformation.CurrentProjectCustomer.QuoteId);

this.tabTitle = this.tabTitle.concat('/n' + " Quote ID: " + this.quoteInformation.CurrentProjectCustomer.QuoteId);

Any help will be greatly appreciated.

Show us how you declare tabTitle and how you use it in the HTML markup. — Martin Parenteau
– Martin Parenteau, Commented May 23, 2018 at 20:53

Brent · Accepted Answer · 2018-05-23 20:28:32Z

5

You can attach a class to the element with the attribute white-space: pre;. This will break it into a new line for you if you're using /n.

edited May 23, 2018 at 20:28

answered May 23, 2018 at 20:22

Brent

3806 silver badges13 bronze badges

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

1 Comment

Dong Hoon Kim Over a year ago

Thank you, this was the 2nd part of the answer. Greatly Appreciated.

David Walschots · Accepted Answer · 2018-05-23 21:27:38Z

2

It seems that .concat() follows its own rules. I tested it myself to find out that every line break operator gets ignored.

If you are not bound to using concat(), simply use the '+' operator instead. It proceeds an implicit concatenation.

Try it this way:

this.tabTitle += '\n' + " Quote ID: " + this.quoteInformation.CurrentProjectCustomer.QuoteId;

edited May 23, 2018 at 21:27

David Walschots

12.7k5 gold badges39 silver badges59 bronze badges

answered May 23, 2018 at 20:21

user6749601

3 Comments

Dong Hoon Kim Over a year ago

Sorry I forgot to add the ticks to the break tags, I have tried this prior and it was adding it in as a string.

user6749601 Over a year ago

PS: If this answer helped you, it would be kind if you would mark it as solution.

Dong Hoon Kim Over a year ago

Thank you for your help, this helped add the break but wasn't showing the actual line break. Needed to add white-space: pre in order for the css to actually show the break!

Collectives™ on Stack Overflow

Adding a new line into concat() string - Angular 4

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related