0

I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i use:

<div [innerHTML]="myDesignHTML | safeHtml"></div>

As super basic example of one of the HTML strings is the following:

<div id="wrapper">
   <div id="content">
      <div id="title">titleText</div>
   </div>
   <div id="footer">
      <p>footerText</p>
   </div>
</div>

As I can't perform data binding on the actual HTML template that's inserted, I find the IDs of the elements and replace the 'placeholder' text with real user data. The issue I'm having is that my page also needs the ability to change colours of elements on the page. I've partially achieved this by doing the following for example:

 document.getElementById("content").style.backgroundColor = color;

However, this doesn't always correctly update the DOM and feels a bit sketchy. Is there anything within Angular that allows the same functionality as [ngStyle] but within dynamic HTML templates that are inserted through [innerHTML]? When the user wants to change the colour of the background, or the text, it would be great to have a variable in the component.ts that get's updated and for the HTML template to react like [style.border-top-color]="mainCOlor" or something of the sort?

Que
  • 957
  • 2
  • 14
  • 35

1 Answers1

0

It seems that you can use the Renderer2 (see https://angular.io/api/core/Renderer2) in Angular. You would want a template reference do your div, and then you would use the nativeElement property to pull the current template. This is a better way to interact directly with the HTML inside of a div.

observingstream
  • 466
  • 3
  • 8