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

6 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
  4. At Go Pro Roofing, our Roofers In Millburn NJ treat every customer as a first-time customer.
    We ensure to address their needs & requirements and offer them an adequate solution. Our mission is to provide the best quality services at reasonable prices and win the customer’s heart with our dedication.

    ReplyDelete
  5. Many online casinos do not offer bonuses and promotions IVP9 on these types of games, but you can find a couple of promotions on reputable gambling platforms.

    ReplyDelete

Blogroll

Popular Posts