What is the best way to implement multiple ternary operators within HTML code?

Consider the following code snippet: It currently applies CSS classes up to red4, but I want to apply CSS classes up to red11. Additionally, the variable "size" in myData should be dynamic. For example, size could range from 0-20 // 0-100 // 0-10000, etc., and the color range should depend on the dynamic size range.

HTML :

<svg><path *ngFor="let item of myData" [attr.class]="item.myColor=='red1'?'red1':item.myColor=='red2'?'red2':item.myColor=='red3'?'red3':item.myColor=='red4'?'red4':null"></path>
</svg>

CSS Classes:

... (CSS classes remain the same as provided)

Typescript Code:

... (Typescript code remains same as provided)

Assistance with this issue would be highly appreciated! Thank you.

htmlcssangulartypescriptsvg

Answer №1

Moreover

[ngClass]="item.myColor"

In addition, you have the option to substitute your fillColor function with

this.myData.forEach((x:any)=>{
  const country=this.myList.find(l=>l.id==x.id)
  if (country)
  {
       x.size=country.size;
       x.myColor='red'+(Math.floor(country.size/10)+1)
  }
})

implementing forEach and find array's methods

Answer №2

If the output of item.myColor is a color name, you have the option to simply assign it as the value for the attribute class by using this syntax:

[attr.class] = "item.myColor ? item.myColor : null"

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

Setting up an angular2 web application on an Nginx server and forwarding HTTP requests to the backend API for

Seeking assistance with setting up angular2 routes and proxying http requests to a rest api on a separate server Currently, I have an angular2 web application running on an nginx server which serves the static html files. The rest api that the application ...

angularapinginxproxy

What is the best way to access an optional field in Typescript without causing errors?

Is there a way to dereference an optional field from an interface in the following scenario? interface Sample { key1?: Array<Obj1> } interface Obj1 { a?: Obj2; } interface Obj2 { b?: string; } const a: Sample["key1"][number][" ...

typescript

Transfer information from a server to a client using the fetch API in pure JavaScript

Hey there, I've been working on a mini app that sends a fetch request to the backend and expects some information in return when a button is clicked. However, I'm facing an issue where the fetch call seems successful with a 200 status, but the d ...

javascripthtmlnode.jsdatabase

Is it possible to enter NaN in Vue3?

Is there a way to handle NaN values and keep a field blank instead when calculating margins with a formula? https://i.stack.imgur.com/JvIRQ.png Template <form> <div class="row"> <div class="mb-3 col-sm ...

javascripttypescriptvue.jsvuejs3

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Utilizing TypeScript union types in React: A step-by-step guide

I'm currently working on applying types to ReactJS props using an interface that includes a union type. In the example below, you can see that the tags type is a union type. export interface TagInterface { id: number; name: string; } export inter ...

reactjstypescript

Issue with NgModule in Angular application build

I'm facing an issue with my Angular application where the compiler is throwing errors during the build process. Here's a snippet of the error messages I'm encountering: ERROR in src/app/list-items/list-items.component.ts:9:14 - error NG6002 ...

javascriptangulartypescript

Navigate through content to reach the bottom of the webpage

I am currently working on a layout that is similar to Facebook's messaging system (facebook.com/messages). I have made some progress with it, but not quite there yet. You can view my work so far here: https://jsfiddle.net/3nd0b17m/23/ https://i.sstati ...

css

Conditioning types for uninitialized objects

Is there a way to create a conditional type that can determine if an object is empty? For instance: function test<T>(a: T): T extends {} ? string : never { return null } let o1: {} let o2: { fox? } let o3: { fox } test(o1) ...

typescript

Why are the tabs in Angular displaying differently when the tab titles exceed 8 characters with Bootstrap 5?

Angular 14 Bootstrap 5 I developed a custom tabs component with pipes between the tabs that works flawlessly. However, I encountered an issue where the tabs slightly shift when the tab title exceeds 8 characters. Despite my efforts, I cannot pinpoint the ...

cssangularsasstabsbootstrap-5

Conceal a div until reaching the end of the webpage by scrolling

Currently, I am working on a web page inspired by music release pages (check out an example here). My goal is to have certain hidden divs at the bottom of the page only reveal themselves once the user has scrolled all the way down, with a delay of a few se ...

javascriptjqueryhtmlscrollhide

Is there a way to prevent an iframe from being recorded in Chrome's browsing history?

I'm in the process of developing a Chrome extension that inserts an Angular application into the user's browser window to create an interactive sidebar. I've been successful in most of my goals by inserting an iframe through a content script ...

javascripthtmlangularjsgoogle-chrome-extensionbrowser-history

How to specify the file path for importing a custom module?

I am currently learning Angular 2 and encountering an issue with importing a custom module that contains interface declarations. Here is my folder structure: https://i.stack.imgur.com/heIvn.png The goal is to import product.interface.ts into a component ...

angulartypescript

Sending data to another page by selecting a list item

Being new to web programming and JavaScript, I am facing a scenario where I have a list of requests displayed on one page and I need to pass the ID of the selected request to another page to display all the details of that particular request. I am strugg ...

javascriptphpjqueryhtml

Issue with debugging Azure Functions TypeScript using f5 functionality is unresolved

I am encountering issues running my Azure TypeScript function locally in VS code. I am receiving the errors shown in the following image. Can someone please assist me with this? https://i.stack.imgur.com/s3xxG.png ...

node.jstypescriptvisual-studio-codenpmazure-functions

Performing arithmetic calculations using HTML

Can math operations be done directly within an HTML element, such as <div width="50/2">, or is it necessary to use Javascript or CSS for this functionality? ...

htmlmath

Incorporate Y-axis titles onto D3 bar chart using the attribute 'name' from JSON data

While following the tutorial on creating a bar chart, I encountered an issue in step three. The bars are rotated to columns, but I am struggling to iterate over a JSON dataset and add Y-axis labels for each bar using the name attribute from the returned JS ...

javascriptsvgd3.js

Setting the variable to global does not apply styling to the element

Looking for help with styling an element created using document.createElement("img")? let fireball; //global variable fireball = document.createElement("img") //variable on local fireballArray.push(someFunction(fireball, { src: "img.png&qu ...

javascripthtmlcssdomstyles

What about employing the position:fixed property to create a "sticky" footer?

I've come across various methods for creating a sticky footer, such as Ryan Fait's approach found here, another one here, and also here. But why go through the trouble of using those techniques when simply applying #footer{position:fixed; bottom ...

htmlcssfootersticky-footer

Troubleshooting Typescript compilation issues following an upgrade to a React Native project

I am facing a challenge while updating a react native project from version 0.63.3 to 0.67.0. When attempting to run npm run tsc, I encounter numerous errors indicating that the typescript packages are not compatible with their original packages. Here is a ...

reactjstypescriptreact-nativenpm