I'm getting the following error from chrome console, when interpreting

<div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}"></div>

Uncaught Error: Template parse errors: Parser Error: Missing expected } at column 17 in [{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}] in ng:///AppModule/HomeComponent.html@31:29 ("="width: 100%; height: 100%;">

What's supposed to cause the error?

I'm getting the following error from chrome console, when interpreting

<div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}"></div>

Uncaught Error: Template parse errors: Parser Error: Missing expected } at column 17 in [{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat': 'no-repeat'; 'border-radius': '0px';}] in ng:///AppModule/HomeComponent.html@31:29 ("="width: 100%; height: 100%;">

What's supposed to cause the error?

• javascript
• html
• css
• angular
• typescript

• 1 I guess ; within the object literal should be instead , – Günter Zöchbauer Commented Aug 29, 2017 at 16:59
• 1 @GünterZöchbauer This was obviously what I had to do. Thanks. – user6039980 Commented Aug 29, 2017 at 17:16

2 Answers 2

Unlike the style attribute which takes CSS styles, ngStyle takes a javascript object (represented in a string). That's why you have to wrap 100% in quotes '100%', as well as other attributes like background-size because % and - characters are illegal in javascript attribute names/values.

CSS

blah {
  attribute: value;
  attribute-dash: value;
}

Object

{
  attribute: value,
  'attribute-dash': value
}

Because of this, you need to replace the ; with ,.

<div [ngStyle]="{'width': '100%', 'height': '100%', 'background-size': 'cover', 'background-repeat': 'no-repeat', 'border-radius': '0px'}"></div>

NOTE: ngStyle is supposed to be used if you have dynamic values you're trying to set. It allows you to pass variables into the styles as well as toggle specific styles using booleans. If you're just trying to set inline styles, you should use the normal style attribute.

In newer version you can also use unit.

The key is a style name, with an optional . suffix (such as 'top.px', 'font-style.em').

Like

[ngStyle]="{'width.px':200, 'height.px':200}"