2

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.

Vivek
  • 1,465
  • 14
  • 29
MichaelE
  • 757
  • 14
  • 42
  • 1
    Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) – Vlad274 Jul 11 '18 at 17:45
  • How are you adding the content to the element? You would need to use element.innertHrml = variable, or using an escaped breakline as \n – Nicolas M. Pardo Jul 11 '18 at 17:45

2 Answers2

1

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>

Unmitigated
  • 76,500
  • 11
  • 62
  • 80
1

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);
mscdeveloper
  • 2,749
  • 1
  • 10
  • 17