CODEWITHSUNDEEP
angular
dndr
dndr

Reputation: 2359

Define CSS classes at runtime in Angular 4

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.

Upvotes: 1

Views: 673

Answers (2)

user4676340
user4676340

Reputation:

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]; }

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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;
}

Upvotes: 2

Related Questions