Include css styles sent by a backend into a component

Question

I'm trying to include css styles sent by a backend into my component template.

My server response looks like this:

serverResponse: {
   content: '<div class="myClass classX">hello world</div>',
   styles: '.myClass{color:red} .classX{...}  ....';
}

(I know it's not a good idea to get css styles from a backend, but unfortunately I can't change it ;-)

My component template looks like this:

<style>
   <!-- serverResponse.styles should be in here. But how? -->
</style>
<div [innerHTML]="serverResponse.content">
   <!-- Binding to innerHTML works! -->
</div>

I have already set encapsulation to "ViewEncapsulation.None" in my component to enable styling with the <style> element.

What I have already tried is something like this:

<style [textContent]="serverResponse.styles">

But binding to textContent does not work...

I'd really appreciate your help!

Why doesn't <style [innerHTML]="serverResponse.styles"> work? What errors do you get? — Mr Lister
– Mr Lister, Commented Jan 17, 2017 at 21:02

duke636 · Accepted Answer · 2017-01-14 16:36:40Z

1

First you should update your class property with your style from server response.

Then bind your style class property using style binding with your template.

answered Jan 14, 2017 at 16:36

duke636

8002 gold badges8 silver badges13 bronze badges

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

2 Comments

Roger Cracel Over a year ago

I do agree that this is a better approach, I would highly recommend this over trying to dynamically add CSS to the page styles.

Michael Hunziker Over a year ago

What do you mean with "update your class property"? The styles I get from the backend could contain multiple classes... E.g. serverResponse.styles = ".myClass{...} .classX{...}"

Roger Cracel · Accepted Answer · 2017-01-14 16:43:56Z

0

I hesitated a bit since I don't think appending individual css rules to the page is good practice, but I will attempt to answer the question.

$(function() {

  function handleElementResponse( html, css ) {
    console.log( $("style") );
    
    $("style").append( css );
    $("#mydiv").append( html );
  };
  
  handleElementResponse(
    "<div class=\"myClass\">hello world</div>",
    ".myClass{color:red}"
    );
    handleElementResponse(
    "<div class=\"myClass2\">hello world 2</div>",
    ".myClass2{color:blue}"
    );
});

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style></style>
</head>

<body>
  <div id="mydiv">
     <span class="someClass">Hello</span>
  </div>
</body>
</html>

My humble opinion is that instead you should either:

Add the styles to the element directly using the "style" attribute
If possible, define your styles beforehand and just apply the classes to the html elements.

Hope this helps

answered Jan 14, 2017 at 16:43

Roger Cracel

1517 bronze badges

1 Comment

Michael Hunziker Over a year ago

Ok this might work... But I'm wondering if there is a more Angular2-specific solution.

Collectives™ on Stack Overflow

Include css styles sent by a backend into a component

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related