CODEWITHSUNDEEP
javascripthtmlangular
MichaelE
MichaelE

Reputation: 767

How to present a multi-line string variable in html

I need to display a multi-line variable in my angular 4 view (HTML). The problem is I place the HTML tag br / where I want the string to break and starts at a new line but the br / shows up as text instead. I have tried br/, \r br /, ...none of these works. Here is a sample of the text:

FILE CONTENTS

<br /> xxxxx connects buyers of automotive parts and services with providers of those services. This document outline what information we collect from both the buyers and providers and how we handle this information, our privacy policy.<br />1. Scope of this Privacy Policy:<br /> xxxxxx and its parents, subsidiaries, representatives, affiliates, officers and directors (collectively, 'PuppyDog') values the privacy of individuals who use our application, websites, and related services. This privacy policy (the 'Privacy Policy') explains how we collect, use, and share information from xxxxxxx users (('Users'), comprised of both buyers of automotive parts and services and providers of those services.<br />2. Information We Collect-<br />Personal Information-<br />Buyers Registration Information. When you register as a.......

I should point out that the variable from a JSON file using data binding to display the value in the HTML. I would be grateful for any suggestions.

Upvotes: 2

Views: 3292

Answers (2)

mscdeveloper
mscdeveloper

Reputation: 2889

To use multi-line variables, use symbol `

To use new string use \n

Like this:

var text=`\n
 xxxxx connects buyers of automotive parts and services with providers of those services. This document outline what information we collect from both the buyers and providers and how we handle this information, our privacy policy.\n
 1. Scope of this Privacy Policy:\n
 xxxxxx and its parents, subsidiaries, representatives, affiliates, officers and directors (collectively, 'PuppyDog') values the privacy of individuals who use our application, websites, and related services. This privacy policy (the 'Privacy Policy') explains how we collect, use, and share information from xxxxxxx users (('Users'), comprised of both buyers of automotive parts and services and providers of those services.\n
 2. Information We Collect-\n
 Personal Information-\n
 Buyers Registration Information. When you register as a.......
`;

alert(text);

Upvotes: 2

Unmitigated
Unmitigated

Reputation: 89224

Use an element's innerHTML attribute to add HTML inside it.

<script>
var x = "<br /> xxxxx connects buyers of automotive parts and services with providers of those services. This document outline what information we collect from both the buyers and providers and how we handle this information, our privacy policy.<br />1. Scope of this Privacy Policy:<br /> xxxxxx and its parents, subsidiaries, representatives, affiliates, officers and directors (collectively, 'PuppyDog') values the privacy of individuals who use our application, websites, and related services. This privacy policy (the 'Privacy Policy') explains how we collect, use, and share information from xxxxxxx users (('Users'), comprised of both buyers of automotive parts and services and providers of those services.<br />2. Information We Collect-<br />Personal Information-<br />Buyers Registration Information. When you register as a.......";
function addText(){
 document.getElementById("x").innerHTML = x;
}
</script>
<span id="x"></span>
<br/>
<button onClick="addText()">Fill span with text</button>

Use this syntax: <div [innerHTML]="HTMLstring"></div>

Upvotes: 1

Related Questions