Ionic 2: Apply a New Class to Selected Item and Remove Class from Others

I have a collection of buttons that, upon being clicked, should have a class added to change their color. Before adding the class to the clicked button, I want to ensure that any previously selected button has the class removed.

CSS

.selected-date-item {
  background:#272829;
  color:white;
}

HTML

<button class="date-time-select" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>

JavaScript

updateSelectedDate(selectedDate) {
  this.selectedDate = selectedDate;
}

https://i.sstatic.net/lczIi.png => https://i.sstatic.net/t60q4.png

Answer №1

Learn how to dynamically set a CSS-class using the [ngClass] directive.

<button [ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}" *ngFor="let chooseDate of possibleDates" (tap)="selectPickupDate(chooseDate)">{{chooseDate}}</button>

[ngClass] explained further:

[ngClass]="{'selected-date-item': chooseDate == selectedDate, 'not-selected-item': chooseDate != selectedDate}"

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

Passing data between Vue components

Currently, I am extracting a language setting from the DOM and assigning it to a global Vue.js variable in the following manner: const language = document.querySelector('html').getAttribute('lang'); Vue.prototype.$language = language; ...

What could be causing req.params to come back as undefined?

I have reviewed two similar questions here, but none of the suggestions in the comments seem to be resolving my issue. app.get('/:id', function(req,res) { console.log(req.params.id); }); app.get('/:id', function(req, res) { db.que ...

What is the best way to determine if the form has been submitted?

I am working on a React form and need to determine when the form has been successfully submitted in order to trigger another request in a separate form. const formRef = React.useRef<HTMLFormElement>(null); useEffect(() => { if (formRef &a ...

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

Exploring the intricacies of nested directories with Nuxt 3 and Vite

I'm looking to implement nested directory functionality in Nuxt 3 beta with Vite. In Nuxt 2, I successfully used the following configuration in (nuxt.config.js): components: [ { path: '~/components', // will get any components nested in l ...

Luxon: retrieve an array of time offsets and time zones (similar to what can be done in moment-timezone)

Currently, I am using the moment-timezone library to retrieve raw information for a specific timezone and then incorporating it directly into my downstream code. const zone = moment.tz.zone('Europe/London'); This data contains: { "name":"Eu ...

Are microformats a regular part of your web development?

Have you incorporated microformats into your web projects? If so, what are the reasons behind using them? If not, why have you chosen not to use them? If you do use microformats, what specific aspects of your projects do you apply them to? Are there any ...

The positioning of the JQueryUI menu is experiencing some issues

My goal is to dynamically create menus using JQueryUI menu widgets. Check out this Plunker Example for Dynamic Menu Creation with some issues I am facing an issue where the menu is not positioning itself correctly. It always appears near the bottom of my ...

How do I send JSON data to an MVC Controller?

I'm working with a JSON object that has nested arrays and need to send it to a controller for processing. Here's how I'm making my jQuery.ajax call: $.ajax({ url: "@Url.Action("ExportJson")", type: "POST", ...

Is there a way to retrieve all the items from the array?

I've been on the hunt for this information but unfortunately, I haven't found a satisfactory answer yet. Currently, I am utilizing Json encode to transfer my array to JavaScript: In PHP while($row = mysql_fetch_assoc($select)) { $event_day = $ ...

Enhancing Accessibility Features with JavaScript for Websites

Is implementing WAI ARIA support with JavaScript alone enough to accommodate users with disabilities using assistive devices? This script would improve the website markup to align with WAI/ADA guidelines by incorporating features like `tabindex`, `aria-` ...

Connect a guard with a component for deactivation without the need for RouterModule

When including a component on an HTML page, I typically use the following syntax: <app-my-component></<app-my-component> My goal is to associate a guard canDeactivate with the my-component component. Since this component is not called by a ...

On screens with smaller dimensions, the divs intersect with each other

I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...

Proper method for extracting and sending the final row of information from Google Sheets

The script I have is successfully formatting and sending out the information, but there is an issue. Instead of sending only the latest data, it is sending out each row as a separate email. I specifically want only the last row of data to be sent. functio ...

Invoke the ngOnInit method in Angular 7 or any other method within the component itself

My current dilemma involves a component named user-table-list, which essentially represents a table with entries corresponding to various users. Within this setup, there exists another component called table-list, responsible for defining the structure a ...

Using Browserify to import a file located in the same directory from an npm repository

I am facing an issue with requiring a specific module in my .js file. This particular module consists of two sibling files, a.js and b.js, with a.js being the main file according to package.json. Both a.js and b.js can be accessed using module.exports. Ho ...

Send an array to a function with specified criteria

My current code successfully splits an array, but I need to pass a value when the array condition is met. For example, here is how the value is split into an array: var myArr = val.split(/(\s+)/); If the array in position 2 is empty, I need to use ...

overlapping text placed directly above another text

Is there a way to place a text fragment above another part of the same line? <div>Th<div class="ac">Am</div>is is an ex<div class="ac">E</div>ample line</div> If implemented, it should display as: Am E This ...

problem with overflow in HTML and CSS opera browser

My gradient is not displaying properly in the Opera browser. Can anyone help me troubleshoot? Check out the code on jsfiddle for reference:) http://jsfiddle.net/KtDTK/7/ <div class="product_1"> <div class="product_block"> <div cla ...

Ensuring consistent height for the initial div across separate columns (Bootstrap 4)

Here is the HTML structure that needs adjustment: <div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-lg-4 col-md-4"> <div class="title">Some title</div> <ul&g ...