How to add multiline to data attribute in angular

Question

I'm using Quill Editor inside an angular project and I need multiline placeholders. Since Quill renders the placeholders via ::before I thought it should be straight forward to implement this, as specified in this SA question about multiline data attributes.

I get the placeholders from the Backend via Json:

placeholder : 'Line number 1 &#xa; Line number 2'

When I put this as value for placeholder these "new line" indicators are not rendered as new line but rather as text.

<quill-editor [placeholder]="rtePlaceholder">

When I edit the page with Dev Tools and copy paste the string from the JSON into the generated data-placeholder attribute it renders correctly.

I thought I maybe have to bypass the domsanitizer somehow as said in this SA question

 <quill-editor [placeholder]="getRtePlaceholder()">

 getRtePlaceholder() {
  // hardcoded string to better show it, here will then be the value from the JSON.
  this.rtePlaceholder = this.sanitizer.bypassSecurityTrustHtml('Line 1. &#xa; Line1');
  }
  return this.rtePlaceholder;
 }

Now I run into this problem, I get SafeValue must use [property]=binding although I'm already using property binding. (another SA question about this, and even another one)

But these question are mostly only about innerhtml (one is about src for iframe) but I never got any of these to work.

So my question is: Is this the correct way to get the multiline attribute for angular? And if so, how do I escape it correctly? If not, how else do I get multiline data-attribute to render in Angular?

How to add multiline to data attribute in angular

0 Answers0