How to change the list item bg-color individually using ngFor in Angular 2+ ?
We can solve this using *ngFor directive and attribute binding for binding the background colour.
- Using *ngFor directive iterate through a list of items in .html file.
- By using attribute binding, bind the background color for every item in the list.
- By default use an array which consists of false boolean value in .ts file.
- Use a on click event handler to toggle the background color of the item in the list.
- Once the implementation is done then serve the project using below command.
ng serve --open
Implementation by code:
Output:Before clicking on any item:
After clicking on any item: