Interactive Timeline - Adjust color on click

I am having trouble implementing a timeline and changing the color when clicking on different states. Can anyone help me figure out what the issue is or how I can achieve this?

I intended to give each state a different color, but sadly, it didn't work out as planned.

Below is an image showing the desired outcome.

Thank you in advance.

HTML

<ul>
  <li [ngClass]="priority['isComplete']?'complete':''" *ngFor="let priority of Priorities; let  p = index;" (click)="changeTimeline(priority.id)">{{priority.id}}</li>
</ul>
htmlcssangulartypescript

Answer №1

Assuming that clicking on an active state should change all others to inactive, I have made modifications to your StackBlitz to demonstrate how this can be achieved.

Check out the updated version on StackBlitz.

Answer №2

Within the project, there is no existing CSS class called "complete." To address this, consider adjusting the priority model to include a color field specifying the button color when it is marked as complete. Use the [style.background] property to apply this color to the button directly, eliminating the need for separate CSS classes for different background colors.

Check out this Stackblitz example for reference.

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

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

Launch a bootstrap modal from a different webpage

If you're looking to open multiple modals with different content displayed from HTML files, check out this example below: <div id="how-rtm-works" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ...

javascriptjqueryhtmltwitter-bootstrapmodal-dialog

Designing an uncomplicated password authentication system without embedding the password itself [Using PHP, Javascript, and MySQL]

I'm in the process of setting up a basic login prompt for my local website. I initially experimented with Javascript, but I'm looking for a way to avoid hardcoding the password. Users receive their passwords via email, so there's no need for ...

javascriptphphtmlmysqlauthentication

Guide to adding a personalized image to the header of a Shiny plot?

In the code snippet provided below, I am attempting to incorporate a custom image into the header of a plot. In my application, clicking on this image triggers a modal dialogue with further explanation. However, I am encountering difficulties in getting th ...

htmlrplotshiny

Here is how you can include a date picker with the ability to choose the day, month, and year

Can someone help me create a datepicker with options to select days, months, and years? I've been able to find resources for selecting months and years, but I'm having trouble adding the option to choose specific days. If anyone has experience ...

javascriptjqueryhtmldatejquery-ui

Fixing the filter button: A step-by-step guide

I'm new to html and spring boot, and I'm currently working on filtering and searching for books in a list based on the author, description, etc. However, it seems that my button isn't functioning properly. Can someone please assist me with t ...

javahtmlspring-bootuser-interface

Determine the attribute value based on the source

Is there a method to retrieve the value of the swap-section attribute based on a specific image source? <div class="ig_gallery_right_img" style="overflow-y: scroll"> <img src="/corp/homeowner/images/promo/gallery_traditional_3_sm.jpg" ...

jqueryhtmltagsattr

Ways to refresh drop-down in an angular reactive form

I am currently working with Angular reactive forms and have a dropdown in my form. I am using the reset method to clear my form, but when I do so, the dropdown does not reset. testing.ts file: myMethod() { this.myForm.reset(); } testing.html: <div ...

angularangular-reactive-forms

Issues with implementing the Skeleton feature in the Alert module

Having an issue with a Skeleton component not taking full width inside an Alert component. It seems to be occupying less space than expected. https://i.stack.imgur.com/cMLEy.png Here is the relevant code snippet: <Alert icon={<NotificationsIcon s ...

cssreactjsmaterial-ui

Creating a button spinner in Angular CLI to provide feedback while content is loading

While using Angular Cli, I aim to display a loading spinner or text saying "please wait" until the process is complete. For instance: Get Quotes This code snippet shows the content of quotes.component.html : <div class="btn btn-primary" (click)="onGe ...

angularangular-cli

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

htmlcss

Is there a way to determine which response corresponds to each request when hitting the same endpoint multiple times?

When making multiple requests to an API endpoint, how can I differentiate the response for each specific request? For example, if a user clicks the upload button three times, how can I track each request individually? ...

javaangularspring-boot

The function mustAsync onSuccess is not present in this type (typescript)

I currently have 2 mutations that are functioning well. However, I encountered an issue when attempting to implement onSuccess and invalidateQueries. The error message displayed is as follows: Property 'mutateAsync' does not exist on type '{ ...

reactjstypescriptreact-query

Animating a Canvas to Follow Mouse Coordinates

I am looking for a way to animate a circle moving towards specific coordinates, similar to the game . I have attempted using the jquery animate() function, but it is too slow due to the constant updating of the target coordinates. Is there a faster metho ...

javascripthtmlcanvasjquery-animate

What is the best way to keep the navbar contained within the parent div (hero image) no matter the size of the screen?

After working on adjusting my website layout for different screen sizes, I encountered an issue with the navbar overflowing the parent image when viewed on my laptop. Despite trying both relative and absolute positioning for the .navbar element and setting ...

javascripthtmljquerycss

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

javascriptjqueryhtmldatatablesaurelia

Upgrading my loop React component from vanilla JavaScript to TypeScript for improved efficiency and functionality

After seeking assistance from Stack Overflow, I successfully created a loop in React using a functional component that works as intended. However, I am encountering errors while trying to refactor the loop to TypeScript. The code for my DetailedProduct c ...

reactjstypescriptreact-routerjsxreact-router-dom

I am facing difficulties in installing the necessary node modules for my Angular project

After attempting to run npm install, an error message is displayed towards the end: error syscall unlink 22396 error The operation was rejected by your operating system. 22396 error It's possible that the file was already in use (by a text editor or ...

javascriptangularnpmnode-modulesnpm-install

ASP.NET 5 controller's action not binding correctly with Angular2 Http post request

When sending a post request from Angular2 to an ASP.NET 5 controller action, although the data is being posted correctly and the controller action is being reached, the parameters defined in the controller action are not being properly mapped as they are s ...

asp.net-mvcasp.net-coreangular

Conditional statement in Javascript for document.cookie

I am attempting to create a basic if statement that relies on the value of a cookie. The function looks like this: function setHomePage() { if ($.cookie('settingOne') == 'jjj') { $('.secO').css('display', & ...

javascripthtmlif-statementcookies