Add a unique class to the <li> element in Angular 2 when it is clicked

Here is an example of a component I am working on:

<li >
    <a (click)="status='today'" class="search-dropdown-tabs-active">Today</a>
</li>
<li>
    <a (click)="status='tomorrow'">Tomorrow</a>
</li>
<li>
    <a (click)="status='weekend'">This weekend</a>
</li>
<li>
    <a (click)="status='thisweek'" >This week</a>
</li>
<li>
    <a (click)="status='nextweek'" >Next week</a>
</li>
<li>
    <a (click)="status='thismonth'" >This month</a>
</li>

I am trying to figure out how to set the

class="search-dropdown-tabs-active"
on the selected li element. Any suggestions?

Calendar.component.ts

import { Component, Output, EventEmitter } from '@angular/core'; 
@Component({
    moduleId: module.id,
    selector: 'calendar',
    templateUrl: './calendar.component.html'
})
export class CalendarComponent {
}

Answer №1

The recommended way according to the angular2 documentation is outlined here. For further details, visit the official docs page.

<li [class.search-dropdown-tabs-active]="status === 'thismonth'">
    <a (click)="status='thismonth'" >This month</a>
</li>

Answer №2

<ul>
    <li [class.search-dropdown-tabs-active]="status==='today'">
        <a (click)="status='today'" 
        >Today</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status==='tomorrow'">
        <a (click)="status='tomorrow'" >Tomorrow</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='weekend'">
        <a (click)="status='weekend'" >This weekend</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thisweek'">
        <a (click)="status='thisweek'" >This week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='nextweek'">
        <a (click)="status='nextweek'" >Next week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thismonth'">
        <a (click)="status='thismonth'">This month</a>
    </li>
  </ul>

Check out the live demo here

Answer №3

<li [ngClass]="{'filter-dropdown-tabs-highlighted': status === 'currentDay'}">
    <a (click)="status='currentDay'">Current Day</a>
</li>
<li [ngClass]="{'filter-dropdown-tabs-highlighted': status === 'nextDay'}">
    <a (click)="status='nextDay'">Next Day</a>
</li>

Answer №4

<li [ngClass]="{'highlight-tab': isActive("current")'}">
    <a (click)="toggleTab = 'current'">Current</a>
</li>



isActive(selection : string) : boolean{
   return toggleTab === selection;
}

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

Expanding Grid Container in Material UI to Fill Parent Height and Width

Challenge I'm struggling to figure out how to make a Grid container element expand to the height and width of its parent element without directly setting the dimensions using inline styles or utilizing the makeStyles/useStyles hook for styling. I&ap ...

The desktop menu disappears off the screen when attempting to hide it on a mobile device

My website has two menus, one on the left and one on the right, along with a search bar. When the user activates the menus, they smoothly slide in from the edge of the screen as intended. However, I encountered an issue where the right menu slides off the ...

What could be causing my custom Google font in CSS to not function properly?

I've been trying to change the font-family from Google Fonts in my Bootstrap 5 project, but it's not working as expected. Here's a snippet of my code: HTML <div class="row"> <div class="col-lg-6 col-md-12" ...

Children must be matched to the route before navigating to it

Hello there! I'm having trouble understanding how to navigate new routes with children in Angular 2 rc 4. I'm trying to route to the TestComponent, which has a child, but I keep getting an error message saying "cannot match any route 'test&a ...

Bootstrap 4: Embrace the seamless flow of columns with no gaps in

Recently, I encountered an issue with columns in Bootstrap 4. Despite writing the code correctly, there appears to be no space between the 3 blocks displayed in the browser. Each block consists of 4 columns, but they seem to be directly adjacent to each ot ...

Discovering a specific property of an object within an array using Typescript

My task involves retrieving an employer's ID based on their name from a list of employers. The function below is used to fetch the list of employers from another API. getEmployers(): void { this.employersService.getEmployers().subscribe((employer ...

The 'data' property is absent in the 'never[]' type, whereas it is necessary in the type of product data

Hello, I am new to TypeScript and I'm struggling with fixing this error message: Property 'data' is missing in type 'never[]' but required in type '{ data: { products: []; }; }'. Here is my code snippet: let medias :[] ...

Updating the style of a CSS element using Python Selenium

Is it possible to change the css element style using Python Selenium during automation to increase the height of the page? The structure of the element in the HTML is as shown below: <div style="overflow-y:scroll;overflow-x:hidden;height:150px;&quo ...

Bootstrap Inconsistency: Unnecessary spacing on the right side of the page

The navigation bar is overflowing the viewport on smaller devices, as observed on a personal device and in Chrome developer tools. From 575px onwards, there is increasing whitespace on the side of the screen, with content occupying only 25% at its smalles ...

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

What is the process of hosting an Angular application on a pre-existing Node.js server?

I am currently working on an Angular 6 application that communicates with an existing Node.js API application. Up to this point, I have been using the following command to run and build my Angular application: ng serve Now, I am interested in serving m ...

When there is a change in the signal property within a Signal Store, data will be loaded accordingly

Within my application, I am utilizing a signal store to effectively manage the state pertaining to projects and sites. The current implementation is as follows: interface State { selectedProject: Project | null, selectedSite: Site | null, projects: ...

Issue with (click) event not being detected on most elements throughout Ionic 4 webpage

BACKGROUND: After working perfectly for some time, all the click events in my Ionic app suddenly stopped functioning. I have two floating action buttons that used to trigger a JS alert popup and open a modal window, but now they are unresponsive. The onl ...

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider? https://i.sstatic.net/T7Orm.jpg Slider $('.remember__carousel').slick({ slidesToShow: ...

Exploring the Validation of Request Body Attributes in Loopback 4

I am searching for a solution to prevent undesired attributes from being included in the requestBody, based on the specifications outlined in the corresponding Model. Below is my model: import { Model, model, property } from '@loopback/repository&ap ...

Angular 8 - Unraveling the Mystery Behind its Initial Page Discovery

I am facing an issue with my Angular 8 application where the login page is being displayed at startup. I have checked the routing module but couldn't find anything that explicitly sets this page as the startup page. Any suggestions on what might be c ...

Integrate CSS and Javascript Plugins into your Ruby on Rails application

I am utilizing an HTML, CSS, and JS template to design the interface for my Rails application. Within this template, there are several plug-ins that are required in both CSS and JS formats. I have stored these plug-ins within the "/assets/plugins/" directo ...

Tips for running a Nativescript-Angular app in the background

I am currently developing a hybrid app using NativeScript and Angular that has the capability to send real-time location updates from the user to a server via the geolocation plugin, among other features. While everything seems to be working fine when the ...

The OutDir in TypeScript is populated with the package.json file

Currently, I'm in the process of developing a simple npm package and everything seems to be going smoothly. However, there is an issue that arises when attempting to build it. Upon building, the structure looks like this: - dist - package.json ...

Does Qt have a counterpart to flexbox?

I am developing a widget that allows users to choose answers, and I would like to arrange them in a specific layout. Check out this example: https://jsfiddle.net/yxs1bmq6/1/ Try resizing the window and observe how the boxes behave. Is there a straightfor ...