The functionality of Angular 4's ngStyle sum operates as a string instead of a number

Question

The functionality of Angular 4's ngStyle sum operates as a string instead of a number

<div class="scroll-element-content" [ngStyle]="{'width.px': (this.width + this.trackWidth)}">

With this.width set to 400 and this.trackWidth set to 8:

The combined width of .scroll-element-content will be 4008 (since the sum is treated as a string).

Both this.width and this.trackWidth are declared as numbers.

height: number;
width: number;
trackWidth: number;

An alternative solution I found for adding them together is:

<div class="scroll-element-content" [ngStyle]="{'width.px': (this.width - (-this.trackWidth))}">

However, this solution may not be aesthetically pleasing. Does anyone have a better fix?

string angular typescript sum

Answer 1

Answer №1

One option is wrapping both in a parseInt ( num ).

However, what I usually do is:

Start by declaring a constant object that defines the properties, like this:

const myStyle = { width : '0px', height : '0px' };

The value '0px' can be anything you want as the default.

After that, just set ngStyle to this object. This approach keeps all the conditional logic and clutter out of your HTML. Plus, you can properly document and annotate the object, which isn't as easy if you define everything directly in the markup.

As needed, you can modify that object in your controller to update the view with changes to the width or any other style.

Answer 2

One option is wrapping both in a parseInt ( num ).

However, what I usually do is:

Start by declaring a constant object that defines the properties, like this:

const myStyle = { width : '0px', height : '0px' };

The value '0px' can be anything you want as the default.

After that, just set ngStyle to this object. This approach keeps all the conditional logic and clutter out of your HTML. Plus, you can properly document and annotate the object, which isn't as easy if you define everything directly in the markup.

As needed, you can modify that object in your controller to update the view with changes to the width or any other style.

Answer 3

Answer №2

Instead of directly setting the width property in the .ts file, consider adding the values together first and then binding this final value to the width property.

Answer 4

Instead of directly setting the width property in the .ts file, consider adding the values together first and then binding this final value to the width property.

The functionality of Angular 4's ngStyle sum operates as a string instead of a number

Answer №1

Answer №2

Similar questions

Why does my useEffect consistently execute after the initial rendering, despite having specified dependencies?

Is it true that Angular 4 routers only maintain a single state during navigation?

Customizing the renderInput of the Material UI DatePicker

Enhancing Angular2 performance when managing a large number of input elements with two-way binding

Executing event sending from child to parent via ngx-translate

What is the best way to customize fonts for PDFMake in Angular projects?

The HighCharts is displaying an error message stating "Unable to detect the property 'series' as it is

Running multiple versions of the Angular CLI on one machine

Unable to successfully import { next } from the 'express' module using Typescript

Angular 5 - Deleting DOM Elements Causes View to Remain Stale

Tips on saving a cookie using universal-cookie

What is the process for including an item in an array within Firestore?

Never display mat-select panel when closed

Converting Objects to Arrays with Angular Observables

Tips for accessing data in Angular 2

What is the meaning of a "hook" in the world of HTML?

The child module is unable to locate the route URL for the parent module

Unable to initialize styles in a newly created Angular CLI project

Scouring the Active Directory with AngularJS

Navigating using the Angular router occurs before any other lines of code are executed