Tips for accentuating a chosen cell

When selecting an item from the list, I want to highlight the selected item. How can I achieve this?

Here is the code snippet:

<li class="nav-item dropdown">
  <div class="dropdown">
    <a class="nav-link dropdown-toggle text-white" href="#" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      Dashboard
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a *ngIf="enableActivityDashboardFeature" class="dropdown-item selected" href="#"
        [routerLink]="['dashboarda']">Dashboarda</a>
      <a *ngIf="enableActualsDashboardFeature" class="dropdown-item" href="#"
        [routerLink]="['dashboard']">DashboardA</a>
      <a *ngIf="enableActualsDashboardBetaFeature" class="dropdown-item" href="#"
        [routerLink]="['dashboardb']">DashboardB</a>
      <a *ngIf="enableGrillsDashboardFeature" class="dropdown-item" href="#"
        [routerLink]="['dashboardc']">Dashboardcs</a>
      <a *ngIf="enableGrillsV2DashboardFeature" class="dropdown-item" href="#"
        [routerLink]="['dashboardd']">Dashboardd</a>
      <a *ngIf="enableValuationsDashboard" class="dropdown-item" href="#" [routerLink]="['dashboarde']">Dashboarde</a>
    </div>
  </div>
</li>

Is there a way to keep the selected cell highlighted after selecting an item from the dropdown?

angulartypescript

Answer №1

You have the ability to incorporate functions within your class, such as 

<a class="getActive('someName')"></a>

<li class="nav-item dropdown">
  <div class="dropdown">
    <a class="nav-link dropdown-toggle text-white" href="#" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">
      Dashboard
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a (click)="setActive('dashboarda')" *ngIf="enableActivityDashboardFeature" class="dropdown-item {{getActive('dashboarda')}}" href="#"
        [routerLink]="['dashboarda']">Dashboarda</a>
      <a (click)="setActive('DashboardA')" *ngIf="enableActualsDashboardFeature" class="dropdown-item {{getActive('DashboardA')}}" href="#"
        [routerLink]="['dashboard']">DashboardA</a>
      <a (click)="setActive('dashboardb')" *ngIf="enableActualsDashboardBetaFeature" class="dropdown-item {{getActive('dashboardb')}}" href="#"
        [routerLink]="['dashboardb']">DashboardB</a>
      <a (click)="setActive('dashboardc')" *ngIf="enableGrillsDashboardFeature" class="dropdown-item {{getActive('dashboardc')}}" href="#"
        [routerLink]="['dashboardc']">Dashboardcs</a>
      <a (click)="setActive('dashboardd')" *ngIf="enableGrillsV2DashboardFeature" class="dropdown-item {{getActive('dashboardd')}}" href="#"
        [routerLink]="['dashboardd']">Dashboardd</a>
      <a (click)="setActive('dashboarde')" *ngIf="enableValuationsDashboard" class="dropdown-item {{getActive('dashboarde')}}" href="#" [routerLink]="['dashboarde']">Dashboarde</a>
    </div>
  </div>
</li>

Within your .ts file:

currentChoice = '';


    setActive(choice: string)
      {
        this.currentChoice = choice;
      }
    
      getActive(choice: string): string{
        if (this.currentChoice === choice) {
        return 'active';
        }
        else {
        return 'not';
        }
      }

and your .css file:

.active{
  background-color: yellow;
}

If you wish to highlight multiple items simultaneously, you can utilize a list of Choices.

Answer №2

An easy approach to achieve this is by storing the active cell Id (referred to as dashboarda) in a component field, such as activeCell

In the HTML, you can directly implement it like this:

<a ... 
    class="dropdown-item"
    [class.selected]="activeCell === 'dashboarda'"
    [routerLink]="['dashboarda']">Dashboarda</a>

(... denotes omitted code)

You can then style it using CSS, such as changing the color, background color, or adjusting the opacity. For example:

.dropdown-item { opacity: .7 }
.dropdown-item.selected { opacity: 1 }

Now, all items will have an opacity of 0.7 except for the selected one

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

How can elements be collapsed into an array using the Reactive approach?

Consider this TypeScript/Angular 2 code snippet: query(): Rx.Observable<any> { return Observable.create((o) => { var refinedPosts = new Array<RefinedPost>(); const observable = this.server.get('http://localhost/ra ...

jsonangularjstypescriptreactive-programmingrxjs

Uncover hidden mysteries within the object

I have a function that takes user input, but the argument type it receives is unknown. I need to make sure that... value is an object value contains a key named "a" function x(value: unknown){ if(value === null || typeof value !== 'obj ...

typescript

In Angular, dynamically updating ApexCharts series daily for real-time data visualization

I am currently working with apexchart and struggling to figure out how to properly utilize the updateseries feature. I have attempted to directly input the values but facing difficulties. HTML <apx-chart [chart]="{ type: ...

angulartypescriptapexcharts

Retrieving Headers from a POST Response

Currently, I am utilizing http.post to make a call to a .NET Core Web API. One issue I am facing is the need to extract a specific header value from the HTTP response object - specifically, the bearer token. Is there a method that allows me to achieve thi ...

angulartypescripthttp-headersbearer-tokenangular10

Encountered issues with the BsModalService in displaying the modal functionality

I am encountering an issue while attempting to display a modal using a service. When I call the service from a button, everything works fine. However, I encounter an error when calling it from an error handler. TypeError: Cannot read property 'attach ...

angularngx-bootstrap

Cluster multiple data types separately using the Google Maps JavaScript API v3

I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...

angulartypescriptgoogle-mapsmarkerclustererazure-maps

Is it possible for me to create a CSS class based on a condition using [ngCLASS]?

I am struggling with logic writing in my Angular2 project. On a HTML page, I have two buttons - YES and NO that I want to style with different colors. I have set up a condition in the div tag like this: ngClass="'result'?'yes':' ...

jquerycssangularangular2-templateangular2-forms

Is there a way to prevent the leaderboard from resetting each time I restart my client?

Is it possible to prevent the leaderboard from resetting every time I restart my client? You can see an example here: https://i.stack.imgur.com/2nEPw.png Please disregard the "undefined" error, I will correct it. In the current setup, the leaderboard onl ...

typescriptdiscordleaderboard

Firebase - Accessing data for a specific item

Apologies for the lengthy question. I have a collection of events that I retrieve like this: export class HomePageComponent implements OnInit { events: FirebaseListObservable<EventModel[]>; constructor( private authService: AuthService, ...

angulartypescriptfirebase-realtime-database

I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

I have a dynamic form in my reactive attendance system for employees. When I click on submit, I need to generate JSON data like the following: { "user_id": "1", "branch_id": "4", "auth_token": "59a2a9337afb07255257199b03ed6076", "date": "2019- ...

jsonangulartypescript

Setting default parameters for TypeScript generics

Let's say I define a function like this: const myFunc = <T, > (data: T) => { return data?.map((d) => ({name: d.name}) } The TypeScript compiler throws an error saying: Property 'name' does not exist on type 'T', whic ...

javascriptreactjstypescriptgenerics

Tips for sorting an array of objects by multiple keys while maintaining the order of each key that comes before

I am looking to create a versatile function that can organize an array of objects based on specified keys, while maintaining the order of previous keys. Here is a sample scenario: const input = [ { a: 'aardvark', b: 'bear', c: 'c ...

typescript

Conversations with Dialogflow and Express: Enhancing Fulfilment

I'm facing a challenge with receiving responses from dialogflow, even though other express calls are functioning properly. I believe the issue lies within the agents, but I am unsure of the specific problem or how to resolve it. That's why I hav ...

typescriptexpressgoogle-apidialogflow-esdialogflow-es-fulfillment

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

When looking at this snippet of code: this.router.navigate(['/login'],{queryParams:{returnUrl:state.url}}); An error is displayed stating that "Property 'url' does not exist on type '(name: string, styles: AnimationStyleMetadata". ...

javascriptangulartypescriptfirebaseauthentication

Different ways to prevent invalid entries in an input field with type datetime-local

<input type="datetime-local" step="1"> Is there a way to prevent invalid date input? For example, entering a date like "11:11:1111" in the format "mm-dd-yyyy". How can this be addressed using Moment.js? ...

htmlangularmomentjsdatetime-formatangular-moment

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

androidangulartypescriptcordova-pluginsionic3

Issue with Angular build process

Upon running 'npm run dist' to build the ES2015 javascript bundles, I encountered an error (Exhibit 1) while no error occurred when using 'npm start -o'. The issue appears to be related to the Angular Material Autocomplete component (Ex ...

angularnpm

What is the method for showcasing a single Observable from an Array of Observables in Angular?

I am facing a challenge with displaying questions from an Observable-Array one by one. Currently, I can only display all the questions at once using *ngFor in my HTML. Here is my component code snippet: import { Component, OnInit } from '@angula ...

javascriptangularrxjs

Navigate across list items using the tab key in Angular 7

Below is the sidenav menu snippet containing various items: <ul class="account-settings-container" *ngIf="isUserActive"> <li> <app-account-information></app-account-information> </li> <li> <app-theme-p ...

htmlangular