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;
  }
}

3 comments:

  1. Thank you . It saved lot of time.

    ReplyDelete
  2. Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
    kodi.software
    plex.software
    luckypatcher.pro

    ReplyDelete
  3. The postings on your site are always excellent.
    Prostitution from London

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts