0

I'm having an issue with styles not being applied to elements. If I add style information to the component's styles parameter, or provide a CSS file in the styleUrls parameter, I get the expected results. However, inline HTML styles are not being applied. In the below example I'm trying to apply a red background to a div, but it stays white. This HTML exists as a template for an Angular Component.

<div style="background: red;">test</div>

However, if I add ngStyle="" to the element such as:

<div style="background: red;" ngStyle="">test</div>

Then Angular renders the background of the div in red.

Any ideas what is causing Angular to ignore style attributes like this?

Tyler Gray
  • 11
  • 4

2 Answers2

1

ngStyle and style are the same, they apply styles You can have both populated, and both will apply styles (One will not cancel out the other unless both are trying to do the same thing), but with [ngStyle] you can bind it to attributes in your code, like this: [ngStyle]="{backgroundColor: getColor()}", getColor() being a function that retards a string or hex for a color.

This snippet for example should be valid in angular 2 (At work so cant verify)

<div style="background-color: black;" [ngStyle]="{color: white}">text with back background and white font color</div>

Why the ngStyle directive is declared into the []?

Cacoon
  • 2,467
  • 6
  • 28
  • 61
  • Thanks. PrismJS does come with eight themes when installed with Node.js. I have this style in my .angular-cli.json: "styles": [ ... "../node_modules/prismjs/themes/prism-coy.css" ], – Tyler Gray Feb 24 '18 at 03:59
  • The problem is bigger than PrismJS though, I can't even change the background color of a div with inline style tags. – Tyler Gray Feb 24 '18 at 04:01
  • What CSS are you loading in? because if you have no custom css 'themes' loaded then there is some serious problems, could you possibly make a stackblitz reproduction of the issue and ill have a look? – Cacoon Feb 24 '18 at 04:02
  • At this point, I don't believe PrismJS is at issue here, maybe I shouldn't have included it in the description. My issue is styles are being ignored. In my HTML in the original post, I can't even change a div's background to red. – Tyler Gray Feb 24 '18 at 04:05
  • It did change - The background is red in the code snippet you provided maybe you have color issues on your monitor, is your project on github? if not maybe you could upload it there and link me and I could investigate further? – Cacoon Feb 24 '18 at 04:06
  • I edited the post to hopefully make the issue clearer. I removed references to PrismJS. – Tyler Gray Feb 24 '18 at 04:35
  • Thanks. I understand the syntax is valid, my issue is that Angular is not respecting the background style unless an empty ngStyle attribute is present. If just the style="background: red;" is on the div without an empty ngStyle tag, the div is not red. – Tyler Gray Feb 24 '18 at 04:49
  • You really need to post your source or some way to reproduce this problem because it works fine for others and I dont have enough info to fix the problem – Cacoon Feb 24 '18 at 04:55
0

I ended up upgrading all of my libraries (from Angular 4 to Angular 5) and with no code changes the style information was rendered as expected.

Tyler Gray
  • 11
  • 4