I have a kind of side bar menu. Like this:

 Projects: 
       All
       project1
       project2

When I click an item I want to changed it the background-color. (from black to green).

Projects: 
           All
           project1 // This was clicked and I want to be GREEN
           project2

But, what I did until now was to changed the color for all of the projects when I clicked a project. All of them are green know. I don't know how to do that for a particular item.

<div class="container">
  <h5>Projects: </h5>
  <div class="container-fluid">
    <ul class="nav navbar-nav side-nav">
      <li routerLinkActive="active" class="nav-item">
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
      </li>
    </ul>
    <ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
      <li routerLinkActive="active" class="nav-item" >
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
      </li>
    </ul>
  </div>
</div>

In the ponent:

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

I suppose that this active project method is apply for all the li elements, an remains active when it was stetted on true.

I have a kind of side bar menu. Like this:

 Projects: 
       All
       project1
       project2

When I click an item I want to changed it the background-color. (from black to green).

Projects: 
           All
           project1 // This was clicked and I want to be GREEN
           project2

But, what I did until now was to changed the color for all of the projects when I clicked a project. All of them are green know. I don't know how to do that for a particular item.

<div class="container">
  <h5>Projects: </h5>
  <div class="container-fluid">
    <ul class="nav navbar-nav side-nav">
      <li routerLinkActive="active" class="nav-item">
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
      </li>
    </ul>
    <ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
      <li routerLinkActive="active" class="nav-item" >
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
      </li>
    </ul>
  </div>
</div>

In the ponent:

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

I suppose that this active project method is apply for all the li elements, an remains active when it was stetted on true.

• javascript
• angular
• typescript
• ng-style

• instead of a boolean value, store the active project as a string, then you can check for individual equality – sinanspd Commented Feb 21, 2020 at 15:08

4 Answers 4

I see you have a routerLinkActive="active", this should set the active class on the li element. Then in your CSS, you can do:

li.nav-item.active { background: green; }

You may have to set [routerLinkActiveOptions]="{exact: true}" for exact routing and highlighting.

Then you can get rid of isActiveProject for the change of background color and the ngStyle.

You need to store the index of the active project and pare it to the item in the ngFor loop:

Component:

public activeProjectIndex: number;

public activeProject(index: number): void {
  this.activeProjectIndex = index;
}

HTML:

<ul class="nav navbar-nav side-nav" *ngFor="let project of projects; let i = index">
   <li routerLinkActive="active" class="nav-item" >
     <a (click)="activeProject(i)" [ngStyle]="{'background-color': activeProjectIndex === i ? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
   </li>
</ul>

You can track the clicked item properties ($event.target or whatever you need) by adding the "$event" property in your click function: <a (click)="activeProject($event)"

You also have access to routerLinkActive decorator, so you can also hook your current menu item by its parent class

Please try this, this will initially set green background for 'All' and change the background of the tab when you clicked on it

HTML

<div class="container">
<h5>Projects: </h5>
<div class="container-fluid">
<ul class="nav navbar-nav side-nav">
 <li routerLinkActive="active" class="nav-item">
    <a (click)="activeProject = 'all'" [ngStyle]="{'background-color':activeProject == 'all' ? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
  </li>
</ul>
<ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
  <li routerLinkActive="active" class="nav-item" >
    <a (click)="activeProject = project.projectId" [ngStyle]="{'background-color':activeProject ==  project.projectId? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
  </li>
</ul>

Component

activeProject='all'