When you provide an option to select an item in list of items then you must show the difference between selected items and un-selected items. To show this difference, changing in the background color or text color of selected item is necessary. The user must recognise the items that are select-able, To implement this feature we need to change the background-color or text-color on mouse over. Lets do this with example.
Source Code         DEMO

CSS

Here selectedItem class will give background color to selected item
.menu_selectedItem {
   background-color:#dfdfdf;
}

.menu_hoverItem:hover {
   background-color:#eeeeee;
}

.menu_item {
   padding:12px;
   border:1px solid #ccc;
   cursor:pointer;
}

Markup

When user clicks on item, we will save that index value in selectedIndex variable.  If the selectedIndex value is equal to current index of item menu_selectedItem class will be added that item. 
<div (click)="selectItem(ind)" [ngClass]="{'menu_item':true, 'menu_hoverItem': (selectedIndex !== ind), 'menu_selectedItem': (selectedIndex === ind) }" *ngFor="let item of items; let ind = index">
      {{item}} 
</div>

Script - app.component.ts

Here observe selectItem function
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div (click)="selectItem(ind)" [ngClass]="{'menu_item':true, 'menu_hoverItem': (selectedIndex !== ind), 'menu_selectedItem': (selectedIndex === ind) }" *ngFor="let item of items; let ind = index">
      {{item}} 
    </div>
  `
})
export class AppComponent {
  selectedIndex: number = -1;
  items: string[] = ["india", "america", "UK", "France", "Aus"];

  selectItem(index) {
    console.log(index);
    this.selectedIndex = index;
  }
}

1 comment:

Blogroll

Follow this blog by Email

Popular Posts