Tips for adjusting the color of a single ion-item within an ion-list after being clicked

I've been struggling to find a solution for this issue. I have an ion-list with several ion-items generated from an array using *ngFor. My goal is to change the color of only the clicked item, but so far, all items are changing color on click.

Here's a snippet of the code:

      <ion-col>
         <ion-item *ngFor="let exercise of exercisesArray" (click)="onClick(exercise)"  [ngStyle]="{color: color}"> 
          {{exercise.title}}
        </ion-item>
      </ion-col>
    </ion-list>

In my onClick function, I tried changing the color variable while passing the exercise as a parameter for other operations. However, this results in all items in the exerciseArray getting the same color. What I actually need is to isolate the color change to the specific item that was clicked.

Your assistance with this matter would be greatly appreciated!

Answer №1

Try this approach: Define a variable and track the index of your *ngFor. When an item is clicked, change its color.

.ts

selectedItemIndex: any;

.html

<ion-item *ngFor="let item of itemsArray; let i = index" (click)="onClick(item); selectedItemIndex = i"  [ngStyle]="{color: selectedItemIndex == i ? YourNewColor : null}">
{{item.title}}
</ion-item>

Update the selectedItemIndex variable when an item is clicked, then use it in your ngStyle to apply the new color.

Answer №2

To achieve this, you can initialize the exercisesArray as shown below:

exercisesArray = [
    {
      title: "X",
      color: "blue"
    },
    {
      title: "Y",
      color: "blue"
    },
    {
      title: "Z",
      color: "blue"
    }
];

In your onclick function, pass the id of the clicked array item and use it to change the color of that specific object. For instance,

this.exercisesArray[index].color = 'yellow';

For more information, refer to this link

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

Retrieving a particular div element from a different webpage using Javascript/jQuery

How can I load a specific div from another webpage? <div id="result">Loading</div> <script> $( "#result" ).load("http://bte.gep.msess.gov.pt/pesquisa_avancada.php #boxinterior" ); </script> I've tried using j ...

Verify that the lower limit is not higher than the upper limit set in an Angular application

In my Angular application, I have two input fields for minimum and maximum values. I want to display an error message if the user enters a minimum value greater than the maximum value provided, or the default maximum value if none is provided. The form is ...

Booting up with Bootstrap 4 for a sticky position experience

I am currently utilizing bootstrap to design my website. I have a sticky nav-bar and a button, both of which should ideally stack one on top of the other in the following manner: ------------------------------Nav-bar------------------------------ -------- ...

Highcharts - problem with chart width being fully rendered

I am currently using a Highcharts column chart and I am looking to make it a fully responsive chart with 100% width. The container for the chart is a simple <div> without any additional formatting. Upon document load, the chart remains at a fixed wid ...

Why is the text returned by the Angular Response body missing the JSON brackets? Strange, isn't it

As a newcomer to Angular 2, I should mention that some information is internal and will be replaced with placeholders when needed. My current task involves making a simple post request and retrieving the contents of the request body. Below is my existing ...

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

Ways to align one child to the end without affecting any other elements

I'm attempting to position only div3 at the flex-end of .app. If I use this code: .app { display: flex; flex-direction: column; height: 100vh; justify-content: flex-end; } Div3 goes where I want it, but everything else also moves dow ...

Conceal the parent element if there are no elements present within the child element

Look at the markup provided: <div class="careersIntegration__listing" id="careers-listing"> <div class="careersIntegration__accordion"> <div class="careersIntegration__accordion-header"> <span class="careersIntegrat ...

Expanding text area size dynamically in Nuxt3 using Tailwind CSS

Is there a way to expand the chat input field as more lines are entered? I want the textarea height to automatically increase up to a maximum of 500px, and adjust the height of .chat-footer accordingly. Below is a snippet of my code. <div v-if="ac ...

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap. Desired Layout Structure: Row1: Consists of a fixed header 64px in heigh ...

Placing the footer at the bottom of the webpage

I am struggling to place the footer at the bottom of the page (or screen if the page is shorter than a screen). Here is the code I am currently using: <div id="wrapper"> <div id="header-wrapper"> ... </div> <!--header-wrap ...

Can the height of a container be dynamically adjusted to match the height of its child element with absolute positioning?

My website includes a search field where users can type in their queries. However, I am facing an issue with the autocomplete feature causing layout problems on certain screen sizes. In order to prevent the autocomplete list from affecting the overall pag ...

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

This is my first programming project and I apologize in advance for any mistakes in terminology. My Objective: I am currently working on a project to scrape data from my local library's website. My main goal is to automate the process of renewing bo ...

Python Selenium Automation Loop

I want to create a script that can loop through a list of values for the .send_keys function. I have these values stored in an excel document and I plan to retrieve them using openpyxl in Python. Alternatively, I can define the list directly in Python if n ...

Scroll within the inner container

I am currently working on creating panels, each with a header and content. My goal is to allow scrolling only within the content area. Here is the CSS I have been using: .content-div{ float:left; height: 400px; overflow-x:hidden; overflow-y:hidden; ...

Store user inputs from HTML forms into database using Javascript

I'm looking for assistance on how to store this javascript/html form data in a database. My expertise lies in connecting html/php with SQL, and I need guidance on integrating this form submission process. Below is the code snippet that enables users ...

Steps for ensuring that a script is loaded after the page has fully loaded

Is there a way to make the progress bar begin its loading animation after the `onload` loader animation has completed? Check out this example of normal progress bar animations: JSFiddle Alternatively, here is an example with the `onload` loader added: JSF ...

The Bootstrap Jumbotron section stubbornly stays above the footer

I'm currently working on a Bootstrap 3 page and facing an issue where the yellow area does not seamlessly transition into the green footer. Instead, there is a white space between the end of the yellow area and the start of the footer. How can I resol ...

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

I attempted to use jquery "toggle" in order to hide the div containing text and display an image instead, and vice versa. However, when I click on the button, it does not work as expected. The button is from a bootstrap example - could that be the source o ...

The sole focus is on the animation within the div

Is it possible to have a circle animation within a button without overlapping it? Check out my code on this fiddle. $(document).ready(function(){ $('button').on("mouseup",function(){ $('#mousemark').removeClass("c ...