I implemented progress bars in Angular 2 that have changing maximum values. The service updates the maximum value for each bar dynamically. Currently, the progress bars are functioning at 100% capacity

this.games=[
    {"val":50, "name":"Articlescontributed","max":35},
    {"val":30 ,"name":"Articlesrated", "max":999},
    {"val":20, "name":"Views", "max":35},
    {"val":30, "name":"Ratings", "max":35},
    {"val":20, "name":"Follower", "max":200},
    {"val":17, "name":"Articleviews", "max":200},
    {"val":30, "name":"Comments", "max":500},
    {"val":100, "name":"Comments on Article", "max":100},
    {"val":30, "name":"Profileviews", "max":35},
    {"val":80, "name":"Following", "max":25},
]
<div class="pro">
    <div class="pro-bar"  [style.width]="game.val +'%'">
        <span class="tip">{{game.val}}</span>
    </div>
</div>

this.games=[
    {"val":50, "name":"Articlescontributed","max":35},
    {"val":30 ,"name":"Articlesrated", "max":999},
    {"val":20, "name":"Views", "max":35},
    {"val":30, "name":"Ratings", "max":35},
    {"val":20, "name":"Follower", "max":200},
    {"val":17, "name":"Articleviews", "max":200},
    {"val":30, "name":"Comments", "max":500},
    {"val":100, "name":"Comments on Article", "max":100},
    {"val":30, "name":"Profileviews", "max":35},
    {"val":80, "name":"Following", "max":25},
]
<div class="pro">
    <div class="pro-bar"  [style.width]="game.val +'%'">
    <span class="tip">{{game.val}}</span>    
    </div>
</div>

see in progress "val" indicates how much percentage it will increase like that for every progress bar max value is not 100%..nw our values works only for 100% not for other values so need assistance

angulartypescript

Answer №1

To apply styles using percentages in Angular, you can utilize the ngStyle directive like this -

<div class="progress-bar"  [ngStyle]="{'width.%': progress.value}">

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

Developing a personalized validation function using Typescript for the expressValidator class - parameter is assumed to have a type of 'any'

I'm seeking to develop a unique validation function for express-validator in typescript by extending the 'body' object. After reviewing the helpful resource page, I came across this code snippet: import { ExpressValidator } from 'expre ...

typescriptexpressexpress-validator

Sending a parameter between files in a React application: a step-by-step guide

I am currently working on a Pokedex website where I have Pokemon cards displaying data from a JSON file. When a user clicks on a card, a modal view appears with more detailed information about that specific card. I need help in ensuring that only the deta ...

javascriptreactjstypescriptreact-tsx

Exploring ways to destructure the useContext hook with a null default value in your Typescript code

Initially, I set up a context with a null value and now I am trying to access it in another component. However, when I destructure it to retrieve the variables from the context, I encounter a TypeScript error: Property 'users' does not exist on ...

reactjstypescript

Implement handleTextChange into React Native Elements custom search bar component

I need help with passing the handleTextChange function in the SearchBarCustom component. When I try to remove onChangeText={setValue} and add onchange={handleTextChange}, I am unable to type anything in the search bar. How can I successfully pass in the ...

javascripttypescriptreact-nativeexpo

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Attempting to launch an angular project and encountering the following errors: $ npm install npm WARN @angular-devkit/[email protected] requires a peer of @angular/compiler-cli@^14.0.0 but none is installed. You must install peer dependencies yoursel ...

javascriptnode.jsangularnpm

Incorporating TypeScript seamlessly into your current Create React App project without the need to modify any existing code or files

While I have already installed Typescript in my project, I am more concerned about adding new .tsx files and ensuring they are type-checked. Simply renaming existing .js files to .tsx is not a viable solution, as it requires refactoring all the existing ...

typescriptrefactoringcreate-react-apptsx

How to remove the border of the MUI Select Component in React JS after it has been clicked on

I am struggling to find the proper CSS code to remove the blue border from Select in MUI after clicking on it. Even though I managed to remove the default border, the blue one still persists as shown in this sandbox example (https://codesandbox.io/s/autumn ...

reactjstypescriptmaterial-ui

Creating Angular components in *ngFor loop

I have set up multiple radio button groups by dynamically populating options using ngFor within a ngFor loop. categories:string[] = [category_1, ..., category_n]; options:string[] = [option_1, ..., option_n]; <fluent-radio-group *ngFor='let ca ...

angularangularjstypescriptfluent-ui

Working with a function in the stylesheet of TypeScript in React Native allows for dynamic styling

When attempting to use variables in my StyleSheet file, I encounter a type error even though the UI works fine. Any suggestions on how to resolve this issue? type buttonStyle = (height: number, width: string, color: string) => ViewStyle; export type St ...

typescriptreact-nativereact-native-stylesheet

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

Unable to get the onchange event to trigger for a span element

Is there a way to trigger the onchange event on a span element that doesn't seem to be working? Here is the code I am using: Attempt 1 document.getElementById(seconds).addEventListener('change', (event: MutationEvent & { path: any }) =& ...

javascripttypescript

Error with Chakra UI and React Hook Form mismatched data types

Struggling with creating a form using ChakraUI and React-Hook-Form in TypeScript. The errors seem to be related to TypeScript issues. I simply copied and pasted this code from the template provided on Chakra's website. Here is the snippet: import { ...

javascriptreactjstypescriptreact-hook-formchakra-ui

Utilizing event binding with ngForTemplate in Angular 2

Imagine having a straightforward list rendering component: import {Input, Component } from 'angular2/core' @Component({ selector: 'my-list', template: ` <div *ngFor='#item of items' (click)='onItemClicked(i ...

angular

Cross-origin request error persists despite configuring headers on the server. Unable to successfully relocate image to designated directory on the server

I am encountering a CORS error specifically when sending delete requests from Angular to Laravel. Additionally, I am facing issues with moving car model images to the directory during posting, resulting in errors. I have implemented a CORS middleware and a ...

phplaraveltypescriptcorsangular7

A guide on transforming a Firebase Snapshot child into a personalized object in a React Native environment

I'm looking for a way to retrieve data from Firebase Realtime Database and display it in FlatList format. What is the most efficient method for extracting the child value and converting it into a custom object? For example: class CustomObject { ...

typescriptfirebasereact-nativefirebase-realtime-database

I'm struggling to set up break points in both my Angular application and library within VSCode. I can only seem to get them working in either one or the other, but not both

My goal is to enable debugging in vscode for both my Angular 16 application and my library at the same time. The file structure looks like this: ./root ./root/my-app/src ./root/lib/projects/my-lib I have successfully added my lib to the app's pr ...

angularvisual-studio-codewebpackvscode-debuggersource-maps

Is there a way to include a message in browser.wait() without altering the preset timeout value?

I have encountered an issue with my code: browser.wait(ExpectedConditions.presenceOf(elementName)); Unfortunately, this often fails and only provides the vague message "expected true to be false", which is quite frustrating. When it fails, I need a more ...

angulartypescriptseleniumprotractor

What is the subclass of all object literal types in TypeScript?

With the `strictFunctionTypes` setting turned on, function parameters are checked contravariantly. interface Func<T> { (p: T): unknown } declare let b: Func<{p1: string}> declare let c: Func<{p2: number}> declare let d: Func<{p3: nu ...

typescript

Struggling to access localhost in the browser despite receiving confirmation in the terminal that it is listening on localhost

After successfully creating a new app using angular cli, I launched the server and received the message in the terminal that it is listening on localhost:4200. Please see the image at this https://i.sstatic.net/YprnM.png. However, when I try to access loc ...

angularnpmwindows-7angular-cli

Angular: Updating image tag to display asynchronous data

Utilizing Angular to retrieve user profile pictures from the backend, specifically Node.js/Express, has been mostly successful. However, there is one issue that I have encountered. The HTML displaying the profile picture does not re-render when the user up ...

htmlangulartypescript