What is the best way to incorporate Interpolation in order to calculate the width of an LI element?

Is there a way to apply the same value of {{getCount(userObj.assigned_to, 'Applicable')}} + px to the width of an LI element with a background color? When I try to add it to style.width, I encounter an error.

Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 1

<li class="chart__bar" [style.width]="{{getCount(userObj.assigned_to, 'Applicable')}}">{{getCount(userObj.assigned_to, 'Applicable')}}</li>

Any suggestions on how to set the li width properly?

htmlcssangularinterpolation

Answer №1

<li class="chart__bar" [ngStyle]="{'width': (calculatePercentage(userObj.assigned_to, 'Applicable')*10)+ '%'}">{{calculatePercentage(userObj.assigned_to, 'Applicable')}}</li>

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

CSS transformation incomplete

I am currently creating a scrolling ticker animation for my website. Here is the HTML code: <div class="top-news"> <div class="t-n-c"> <div class="textwidget">Latest News: Our first 20 customers get 20% off their fi ...

htmlcss

Transfer the document to the server using ajax

I've been attempting to upload an image to the server using the following simple code: <form enctype="multipart/form-data"> <input name="file" type="file" /> <input type="button" value="Upload" /> </form> <progress ...

javascriptjqueryajaxhtmlupload

The Bootstrap collapsible feature is causing elements to shift to the adjacent column

I'm currently implementing bootstrap's collapsible feature to showcase a list of stores along with expandable details. However, the issue arises when I expand one of the collapsibles in the left column, causing certain items to shift into the ne ...

cssangularjstwitter-bootstrap

Issues with HTML5 video playback in Apple machines using the Firefox browser

On a website I'm developing, I've included an HTML5 video that works perfectly except for one specific issue - it won't play on Firefox in Apple devices. Surprisingly, it functions well on all other browsers and even on Firefox in Windows an ...

javascriptioshtmlfirefoxvideo

Sending data via Ajax using the multipart/form-data format

I am encountering an issue with a script that is not working correctly. When I submit the form without using the script, everything works as expected. However, when I use the script to submit the form, only the category and description are included in the ...

jqueryhtmlajax

Can an image be positioned so that it extends beyond the edge of the window without impacting the scroll bars?

I'm trying to position an image on the side of the screen that only shows up on large widescreen monitors. Currently, I have this tag in place which positions it perfectly: <img src="image.png" style="position: absolute; left: 1400px ...

htmlcssimage

Tips for creating a dynamic grid layout with a maximum width for desktop items

Imagine this scenario (feel free to copy and paste the code into a new document for better visualization): .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 20px; } .item { background-color: #bfe0f5; ...

htmlcssresponsive-designcss-grid

Create a JSON list by preserving input values together in a PHP form

Currently, I have a JSON list containing conditions (items) and an associated color for each condition. My goal is to construct a form that allows me to update the conditions and then convert them back to JSON format. For instance: <?php ?> $JSO ...

phphtmljsonforms

Changing the icon dynamically when a user unfollows through an AJAX request

I have created a follow icon (button) that allows signed-in users to click on it and add the game to their list using AJAX. However, I need help with switching the button icon and class. I'm not very familiar with JavaScript or AJAX. This is the cur ...

phphtmlmysqlajax

Querying a JSON feed to retrieve a single item by its ID in Typescript / Angular 2 - a step-by-step guide

I am currently working on a service.ts file that is responsible for fetching data from a JSON feed. Below is the code snippet from the file: @Injectable() export class HeroService { constructor(private http: Http) { } private _heroesUrl = '/hero ...

angularangular2-routingangular2-services

I am having trouble getting my bootstrap codes to run on my Django website. Can anyone help me figure

Hey there! Struggling with incorporating bootstrap into my django website. I've added the bootstrap link in the HTML page and inserted the navbar code in the body section, but upon running the server, the website remains unchanged! What could be ca ...

pythonhtmlcssdjangobootstrap-5

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?

Check out this demo where I'm exploring ways to decrease the height of the select field. Here's the code snippet: <mat-form-field appearance="outline"> <mat-label>Toppings</mat-label> <mat-select [formControl]=& ...

htmlcssangularsassangular-material

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

Steps for making a vertical ion-range control

enter image description hereHello there, I'm trying to create a vertical ion-range instead of a horizontal one in capacitor 4. While I successfully created a horizontal range by following the instructions on https://ionicframework.com/docs/api/range, ...

angularionic-frameworkionic4capacitor

AngularJS - Custom directive to extract a property value from an object

Currently, I am using the following for loop to retrieve the parent category: angular.forEach(queryTicketCategories, function(category) { if(category.id === $scope.ticketCategory.parentId) { $scope.parent = category; } }); I am looking fo ...

javascripthtmlangularjsangularjs-directive

How can one stop users from navigating away from a webpage using the back button on their browser?

1) I'm currently exploring options to display a confirm pop-up when a user tries to leave a page using the browser's back button. It seems that the unload event does not trigger in this scenario. My application is built using angular2. I have att ...

javascriptangularangular2-routing

Tips for effectively implementing a light/dark mode feature in Bootstrap

My HTML template utilizes Bootstrap 4.5 and the bg-dark class, but I am interested in implementing a "light/dark" switch. I have noticed that Bootstrap includes a bg-light css class, and I am unsure about the best approach to utilize it. Here are my questi ...

cssbootstrap-4sass

Failed to deploy JEST test using THREE JS OrbitControls due to ENOENT error

I have successfully implemented a new feature that utilizes the Orbit Controls library. Everything is functioning properly, and I imported the Three.js module as per the documentation: import { OrbitControls } from 'three/examples/jsm/controls/OrbitC ...

angularjestjsthree.jsenoentorbitcontrols

Elements are not detected after applying display:none

Within the onLoad event, I implemented a function to hide multiple div elements by setting their CSS property display to "none" and assigning them the class name "invisible": function hideContent() { laElements = document.getElementById("content").chil ...

javascripthtmlcssdom

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons