Define CSS classes at runtime in Angular 4

Question

If I have a template as such:

<div [innerHTML]="html"></div>

and in the component:

    public html = "<div class='title'>Title</div><p>etc. etc.</p>";
    public theme = {
       title: { 
          styles: {
             letterSpacing: '1px',
             fontWeight: 'bold', 
             color: 'gray' 
         }
      }
   };

How can I apply the CSS in theme.title.styles to the rendered HTML?

One idea I had is to dynamically define the styles in the component metadata, but I don't know whether this is possible.

Saurabh Agrawal · Accepted Answer · 2017-11-09 09:57:58Z

2

Well I think you can use ngStyle

Try this hope it will work :)

<div [ngStyle] ="getStyle()" [innerHTML]="html"></div>

And then declare a function in component as

getStyle(){
  let styleObject =  theme.title.styles;// or your style object howe so ever you want to define
  return styleObject;
}

answered Nov 9, 2017 at 9:57

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

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

Comments

user4676340 · Accepted Answer · 2017-11-09 10:04:02Z

1

Since you use HTML, you can't use ngStyle.

From there, you have two solutions, but given your theme object structure, this only leaves one :

public html = `<div class="title" id="YouNeedACustomId">Title</div><p>etc. etc.</p>`;
let el = document.getElementById('YouNeedACustomId');
for (let prop in theme.title.styles) { el.style[prop] = theme.title.styles[prop]; }

answered Nov 9, 2017 at 10:04

user4676340

Collectives™ on Stack Overflow

Define CSS classes at runtime in Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related