Skip to content
Related Articles

Related Articles

How to change the list item bg-color individually using ngFor in Angular 2+ ?
  • Last Updated : 07 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

Introduction:
We can solve this using *ngFor directive and attribute binding for binding the background colour.

    Approach:

  1. Using *ngFor directive iterate through a list of items in .html file.
  2. By using attribute binding, bind the background color for every item in the list.
  3. By default use an array which consists of false boolean value in .ts file.
  4. Use a on click event handler to toggle the background color of the item in the list.
  5. Once the implementation is done then serve the project using below command.
    ng serve --open

Implementation by code:
app.component.html:
 




<ul>                        
                                                              
    <li  (click)="changeColor[i]=!changeColor[i]"  
// we are toggling the background 
// colour on click event handler
   [style.background-color] = "changeColor[i]  ? 'red' : 'green'" 
   *ngFor="let item of list ; let i = index">
      {{item.name}}
    </li>
    
</ul>

app.component.ts:
 




import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
changeColor= [false, false, false];
  
list = [
    { name : 'GeeksForGeeks' },
    { name : 'Google' },
    { name : 'HackerRank'}
  ];
}

Output:Before clicking on any item:



After clicking on any item:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :