Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below:

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

An uncaught error occurred with the message: 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 could be causing this error?

javascripthtmlcssangulartypescript

Answer №1

When using the ngStyle attribute, it is important to note that it takes a javascript object (which must be represented as a string), unlike the style attribute which accepts CSS styles. This is why values like 100% need to be wrapped in quotes, such as '100%', along with other attributes like background-size because characters like % and - are not allowed in javascript attribute names/values.

CSS

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

Object

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

To properly use ngStyle, you also need to replace the ; with ,.

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

NOTE: It is recommended to use ngStyle when working with dynamic values or toggling specific styles based on conditions. If you simply want to set inline styles, stick to using the regular style attribute.

Answer №2

The most recent update allows for the utilization of units as well.

Each key represents a style name, which may include a . suffix, for example 'top.px' or 'font-style.em'.

For instance

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sidebar collapse using Bootstrap

I have been working on creating a collapsible sidebar that pushes the content on the right, but I'm facing issues with responsiveness. When I display the sidebar, the content is getting compressed instead of pushed. I tried adding flex-shrink-0 to the ...

csstwitter-bootstrapbootstrap-5

In React, I am unable to invoke a function that has been assigned to an element

import React from "react"; import shortid from "shortid"; export default class App extends React.Component { state = { items: [], text: "" }; handleTextChange = event => { this.setState({ text: event.target.value }); }; ...

javascriptreactjs

Utilize data fields beyond the export default in Vue

Is there a way to access the information stored within the export default in my Vue component's JavaScript file? Specifically, I am trying to retrieve the contents of the routes array within the calculateAndDisplayRoute() function. overview.js funct ...

javascriptvue.js

What could be causing my scene to fail to render?

I'm attempting to adapt this particular example into CoffeeScript. Below is a snippet of my code: class Example width: 640 height: 480 constructor: -> @camera = new THREE.PerspectiveCamera 45, @width/@height, 10000 @cam ...

javascriptcoffeescriptthree.js

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js

Executing multiple commands using Node.js TCP communication

I have established a connection to a serial device via the internet using an ethernet to serial device. The communication is facilitated through a small node.js application. The provided code retrieves the necessary information: var net = require('ne ...

javascriptnode.jstcp

Customized function enabling dynamic menu display based on varying screen dimensions

Looking for assistance with JS and jQuery as I am relatively new to it. Any help would be greatly appreciated... I'm currently working on a responsive header where I want to implement onclick functions for mobile and tablet resolutions only. I' ...

javascripthtmljquerycssjquery-events

A single Modal, Ajax, and data that is continuously refreshed

I'm currently facing a challenge in my project as I try to implement Ajax functionality. Although I'm relatively new to using it, I believe I have a basic understanding of its workings. My website involves collecting form data, posting it to a d ...

javascriptphphtmljqueryajax

Disable setTimeout in Node.js triggered by an event

I am facing a dilemma with my code that constantly polls a service and I am looking for a way to efficiently cancel the interval using `clearTimeout` through events. The timeouts essentially act as intervals by calling setTimeout again within the function. ...

javascriptnode.js

What are the disadvantages of using getBoundingClientRect() in ReactJS?

I recently incorporated the getBoundingClientRect() method into my project. However, a fellow React developer expressed concerns about its browser compatibility. In theory, shouldn't Webpack or Babel handle such compatibility issues? ...

javascriptreactjsdom

What is the best way to insert horizontal padding into each line of a single sentence that is wrapped on multiple lines

Below is the code snippet I am working with: <div><p><span>... highlighted text ...</span></p><p>Chapter info</p></div> Here is a screenshot of how it currently appears: I am looking for a way to add paddi ...

csshtml

Converting a single 10GB zip file into five separate 2GB files with the help of NodeJS

var fs = require('fs'); var archiver = require('archiver'); var output = fs.createWriteStream('./test.zip'); var archive = archiver('zip', { gzip: true, zlib: { level: 9 } // Sets the compression level. }); ...

javascriptnode.js

Single-use binding format

I am a beginner with Angular and I have some doubts about the syntax used in Angular. In AngularJS, we can achieve one-time binding like this: <p>{{::myVar}}</p> In Angular, I know we can do it differently. <p [innerText]="myVar"></ ...

javascriptangular

Engage with Vue.js and traditional JavaScript (plain) in your projects

Exploring the integration of Vue with regular JavaScript has presented a challenge. While some solutions online propose moving all functions to a Vue component, this approach proves impractical for complex or large functions. The task now is finding a way ...

javascriptphpjqueryvue.js

Foundation 5 - ensure background-image covers the entire column width

I'm trying to achieve a unique layout using Zurb Foundation. My goal is to have two columns, each taking up half of the screen: <div class="small-6 columns"><!-- INSERT IMAGE HERE --></div> <div class="small-6 columns"> < ...

htmlcsszurb-foundationbackground-image

While developing an exam portal with Angular and Spring Boot, I encountered an issue when trying to incorporate a name field as [name]

Component.html <div class="bootstrap-wrapper" *ngIf="!isSubmit"> <div class="container-fluid"> <div class="row"> <div class="col-md-2"> <!- ...

javascriptangulartypescript

Preventing all hammer.js (angular-hammer) interactions except for single taps

Utilizing the angular-hammer module in my app, I am keen on refining its performance specifically for the tap event. Given that no other gestures are required, I aim to enhance efficiency by excluding unnecessary listening functions, such as double tap. As ...

javascriptioscordovatouchhammer.js

Converting FormBuilder object to a generic object

Is it possible to convert FormBuilder values into an object model? this.form.value= this.modelObject; -> simply does not work let objectModel: ObjectModel = new ObjectModel(); objectModel.objecta = "valueA"; objectModel.objectb = "valueB"; this.for ...

angularobjectcasting

Bringing @angular/code into a directory that is not within an Angular project

Currently, I have an Angular 2 project folder with a separate service folder named "auth.service.ts" located outside of it. Within this service file, I am importing `Injectable` from `@angular/core`. However, due to the service being located outside of t ...

javascriptangulartypescript