Applying style to HTML elements using Typescript

My issue involves working with a combination of HTML and TypeScript.

   <ion-card class="ionCard" *ngFor="let item of libraries">
      <ion-card-header>
        {{getLibraryName(item.locationName)}}
      </ion-card-header>        
      <ion-card-content>
          <label>{{item.occupiedSeats}} out of {{item.freeSeats + item.occupiedSeats}}</label>
        <div class="progressBar">
        <div class="progressBarFilled" style="width:50%"></div>    
        </div>                                
      </ion-card-content>
</ion-card>

In the div with the class= progressBarFilled, I am setting a fixed width. I want to make this width dynamic instead. Ideally, I would like to set it as 

width = {{item.occupiedSeats/item.freeSeats}}
.

Is there a way to achieve this dynamically?

htmlcsstypescriptionic-framework

Answer №1

To control the width, you have a few options:

<div class="progressBarFilled" [style.width]="(item.occupiedSeats/item.freeSeats) + '%'"></div>

If you always want to use a percentage, you can directly bind to that:

<div class="progressBarFilled" [style.width.%]="(item.occupiedSeats/item.freeSeats)"></div>

Alternatively, you can utilize the NgStyle directive to manage the value:

<div class="progressBarFilled" [ng-style]="{'width': (item.occupiedSeats/item.freeSeats) + '%'}"></div>

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

Issue with image slider loop functionality not functioning properly

Looking to incorporate this image slider into my website: http://codepen.io/rslglover/pen/DBvoA The slider functions properly, but it halts after completing its cycle. I'm unsure of what distinguishes the CodePen code from mine. How can I replicate t ...

htmlcss

Implementing Jquery UI auto complete feature within a navigation bar

Having an issue with an autocomplete input in the header. The UI-widget-content is not appearing just below the input field, it seems to be hidden by the navbar. <div class="form-inline header-form"> <div class="ui-widget"> ...

htmlcsstwitter-bootstrap

Having trouble with ng-select focus in Angular 5?

I've been attempting to implement focus on ng-select within Angular 5, but unfortunately, it doesn't seem to be working as expected. Currently, I am utilizing ng2-select for my project. Is there a specific method for implementing focus on ng-se ...

htmlangulartypescriptfocus

Retrieving webpage information in XML structure with CURL

My goal is to retrieve data in both XML and HTML formats using the curl command. curl --data "<xml>" --header "Content-Type: xml" http://example.com curl --data "<html>" --header "Content-Type: html" http://example.com In both cases, I r ...

htmlxmlhttpcurlweb

Deleting an element from an HTML page with jQuery

Hi there, I'm just starting to learn about jQuery. Below is an example of a list element I have: <ul> <li> <a href="abc">ABC</a> </li> <li> <!-- This is the element I want to get rid of --&g ...

jqueryhtmljquery-selectors

What are the steps to create a horizontal submenu in WordPress?

Is there a way to change the default vertical sub menu of my main menu to horizontal? The CSS for the sub menu in stylesheet.css is as follows: .main-nav>ul>li .sub-menu> li { padding:0 20px; } .main-nav>ul>li .sub-menu> li:first-ch ...

csswordpress

Aligning Bootstrap 4 Images and Spans

My goal involves two tasks: 1 - CENTER a Span within an Img; 2 - ALIGN the Span to the right of the main div This is what I currently have -> https://i.sstatic.net/Yln15.png The existing code is as follows: <div class="row" style="text-align: righ ...

cssbootstrap-4

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

javascripthtmlcss

The Selenium driver's execute_script() function is not functioning as expected

When I attempt to execute a JavaScript using driver.execute_script, nothing happens and the system just moves on to the next line of Python code. Any ideas? I've been web scraping on a webpage, using JavaScript in the Console to extract data. The Jav ...

javascripthtmlseleniumselenium-webdriverweb-scraping

Coloring the Text on Buttons

After nearly 24 hours of practicing, I still can't seem to wrap my head around it. Can someone assist me in changing the button text color to white, while keeping everything else the same? //NAVIGATION //======================== .nav ul display: ...

htmlcss

Ways to design a JavaScript-generated element

I am attempting to customize a text box generated using JavaScript by assigning an ID to the created element in the following manner: const x = document.createElement("INPUT"); x.setAttribute("type", "text"); document.getElementById("textBoxForText").app ...

javascripthtmlcss

Bar chart in Chart.js becomes crowded and illegible on smaller screens due to overlapping bars

Hello there! I've encountered an issue where the bar chart overlaps when the screen width is too low. It seems to be related to the maintainAspectRatio property, which I set to false because I wanted the charts to shrink only in width, not in both axe ...

angulartypescriptchart.jsng2-charts

Guide to overlaying an SVG on a PNG in an HTML document

Can anyone provide guidance on how to position an SVG logo on top of a PNG image, centered within it? Here is the image I am working with: https://i.sstatic.net/GWrGs.png This is the desired outcome: https://i.sstatic.net/PEgVw.png Below is my SVG file ...

htmlsvgbootstrap-4

Navigating through pages can result in Ruby Locales becoming misplaced

I am encountering an issue with my website where different pages are meant to be shown for different URLs (locales). The problem arises when I navigate from one page to the next, as it defaults back to the default URL instead of staying on the specific sit ...

htmlruby-on-railsrubyruby-on-rails-3locale

How can I create a layout with cards that are arranged differently on wide screens compared to mobile using bootstrap?

Having trouble with my bootstrap 5.x layout. Can anyone help me achieve a design where the cards display like the left image on desktop/wide screens and like the right image on smaller width mobile screens? I currently have the mobile view showing A-B-C-D- ...

csstwitter-bootstrapbootstrap-5

Transform Asp:CheckBox Appearance with CSS Styling

Is there a way to customize the appearance of the standard "3D" look for asp.net checkboxes to have a solid 1px style? When applying styling to the Border property, it simply adds a border around the checkbox itself. I'm looking to change the styling ...

asp.netcsscheckbox

Popup windows are struggling to close correctly

Having an issue with multiple popups not closing properly when clicking another link. The popups keep stacking up even though the close function has been specified in the code. $(document).ready(function() {//$('a.poplight[href^=#]').click(funct ...

javascriptjqueryhtmlcsspopup

Guide to Display chat.html Overlay on home.html Using Ionic 2

In my Ionic project, I have two pages: home.html chat.html I am looking to display chat.html over home.html at the bottom right as a chat window. How can I accomplish this? I have attempted to illustrate what I envision in an image: https://i.sstatic. ...

angularionic-frameworkionic2

What is the best way to generate unique mousedown callbacks on the fly?

My goal is to create multiple divs, each with a unique mousedown callback function. However, I want each callback function to behave differently based on the specific div that is clicked. Below is the code I have been using to create the divs and set the ...

javascriptjqueryhtmlcssmousedown

Enhancing User Interfaces with TypeScript Accordions

Looking for a way to expand the sub-menu when the SETTINGS menu is clicked using typescript. Here is the list structure: <li> <a href="#"> <i class="fa fa-cogs fa-fw"></i> <span>SETTINGS</span> </a> ...

javascripttypescript